@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#17251f; --muted:#69736c; --line:#ccd4cb; --paper:#f1f3ed; --mint:#b8e5ce; --acid:#d7f26c; --orange:#f1724f; --white:#fbfcf7; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Space Grotesk', sans-serif; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); z-index:2; }
.shell { max-width:1160px; margin:auto; padding:30px 34px 40px; }
.masthead, footer, .result-topline, .snippet-heading { display:flex; justify-content:space-between; align-items:center; }
.masthead { border-bottom:1px solid var(--line); padding-bottom:22px; font-family:'DM Mono', monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.brand, .status { display:flex; align-items:center; gap:10px; }.brand-mark { background:var(--ink); color:var(--acid); display:grid; place-items:center; width:27px; height:27px; font-weight:500; }.brand em { color:var(--muted); font-style:normal; }.status { color:var(--muted); }.status-dot { width:7px; height:7px; background:#4bab78; border-radius:50%; box-shadow:0 0 0 4px #d5e9d9; }
.intro { max-width:800px; padding:76px 0 54px; }.eyebrow { margin:0 0 15px; font:500 11px 'DM Mono',monospace; letter-spacing:.14em; color:var(--orange); }.intro h1 { font-size:clamp(44px,6vw,76px); line-height:.98; letter-spacing:-.055em; margin:0; font-weight:600; }.intro h1 span { color:#819088; }.lede { font-size:17px; line-height:1.5; max-width:610px; margin:28px 0 0; color:#52605a; }
.workspace { display:grid; grid-template-columns:1.55fr 1fr; gap:18px; }.upload-panel, .rules-panel, .preview-panel, .info-panel, .snippet-panel { background:var(--white); border:1px solid var(--line); }.upload-panel, .rules-panel { padding:26px; }.panel-heading { display:flex; align-items:center; gap:12px; margin-bottom:24px; }.panel-heading span { font:11px 'DM Mono',monospace; color:var(--orange); }.panel-heading h2 { font-size:16px; margin:0; font-weight:600; }
.dropzone { min-height:230px; border:1px dashed #9cad9f; background:#f5f7f1; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:.2s ease; text-align:center; padding:20px; }.dropzone:hover, .dropzone.is-dragging { border-color:var(--ink); background:var(--mint); }.dropzone input { display:none; }.upload-icon { font-size:36px; font-weight:300; line-height:1; margin-bottom:10px; }.dropzone strong { font-size:17px; }.dropzone small { color:var(--muted); margin-top:7px; font:11px 'DM Mono',monospace; }.file-count { color:var(--orange); font:12px 'DM Mono',monospace; margin-top:18px; min-height:15px; }
.order-note { display:flex; gap:10px; color:var(--muted); font:11px 'DM Mono',monospace; margin:17px 0 22px; line-height:1.4; }.order-note span:first-child { font-size:17px; color:var(--orange); }.primary-button { width:100%; border:0; background:var(--ink); color:var(--acid); padding:17px 18px; display:flex; justify-content:space-between; font:600 14px 'Space Grotesk',sans-serif; cursor:pointer; }.primary-button:hover { background:var(--orange); color:var(--white); }.message { font:12px 'DM Mono',monospace; margin:15px 0 0; }.error { color:#bd4934; }
.rules { margin:3px 0 28px; }.rules div { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); font:12px 'DM Mono',monospace; }.rules dt { color:var(--muted); }.rules dd { margin:0; }.checkerboard { background-color:#eef1eb; background-image:linear-gradient(45deg,#dce4dc 25%,transparent 25%),linear-gradient(-45deg,#dce4dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dce4dc 75%),linear-gradient(-45deg,transparent 75%,#dce4dc 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }.mini-checker { height:120px; border:1px solid var(--line); }.aside-caption { font-size:13px; font-style:italic; color:var(--muted); margin:14px 0 0; }
.result-section { margin-top:72px; }.result-topline { border-bottom:1px solid var(--line); padding-bottom:18px; }.result-topline h2 { margin:0; font-size:27px; letter-spacing:-.03em; }.download-link, .snippet-heading button { font:11px 'DM Mono',monospace; color:var(--ink); text-decoration:none; border:1px solid var(--line); padding:11px 13px; background:transparent; cursor:pointer; }.download-link:hover, .snippet-heading button:hover { background:var(--acid); border-color:var(--ink); }.result-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:18px; margin-top:18px; }.preview-panel, .info-panel { padding:16px; }.preview-stage { min-height:310px; position:relative; display:grid; place-items:center; overflow:hidden; }.preview-stage canvas { max-width:100%; max-height:290px; image-rendering:pixelated; }.preview-label { position:absolute; top:13px; left:13px; color:var(--orange); font:10px 'DM Mono',monospace; }.preview-controls { display:flex; align-items:center; gap:14px; padding:17px 2px 2px; font:12px 'DM Mono',monospace; }.preview-controls label { white-space:nowrap; }.preview-controls output { color:var(--orange); font-weight:500; }.preview-controls input { accent-color:var(--orange); width:100%; }.fps-presets { display:flex; gap:4px; }.fps-presets button { border:1px solid var(--line); background:transparent; padding:5px 8px; color:var(--muted); font:11px 'DM Mono',monospace; cursor:pointer; }.fps-presets button.active { background:var(--ink); color:var(--acid); border-color:var(--ink); }.metric { border-bottom:1px solid var(--line); padding:10px 0 14px; display:flex; justify-content:space-between; align-items:end; }.metric span, .pattern-heading span { font:11px 'DM Mono',monospace; color:var(--muted); }.metric strong { font-size:21px; }.metric i { color:var(--muted); font:10px 'DM Mono',monospace; font-style:normal; margin-left:4px; }.pattern-heading { display:flex; justify-content:space-between; margin:30px 0 12px; }.pattern-heading small { font:10px 'DM Mono',monospace; color:var(--muted); }.exposure-pattern { display:grid; grid-template-columns:repeat(24,1fr); gap:3px; height:64px; align-items:end; }.exposure-pattern i { display:block; height:30px; background:#d2d9d1; }.exposure-pattern i.key { height:53px; background:#55ad7a; }.legend { display:flex; gap:17px; margin-top:15px; color:var(--muted); font:10px 'DM Mono',monospace; }.legend i { display:inline-block; width:7px; height:7px; margin-right:6px; background:#d2d9d1; }.legend i.key { background:#55ad7a; }
.snippet-panel { margin-top:18px; background:#1d2a25; color:#e7f0dc; padding:20px 22px; }.snippet-heading { font:11px 'DM Mono',monospace; color:#9daea1; }.snippet-heading button { color:var(--acid); border-color:#53635a; padding:7px 10px; }.snippet-panel pre { margin:20px 0 0; overflow:auto; font:13px/1.65 'DM Mono',monospace; }.copy-status { height:12px; color:var(--acid); font:10px 'DM Mono',monospace; margin:7px 0 0; }
footer { border-top:1px solid var(--line); margin-top:80px; padding-top:18px; color:var(--muted); font:10px 'DM Mono',monospace; }
@media (max-width:760px) { .shell { padding:20px 17px 30px; }.intro { padding:55px 0 40px; }.intro h1 { font-size:44px; }.workspace, .result-grid { grid-template-columns:1fr; }.rules-panel { display:none; }.result-section { margin-top:52px; }.result-topline { align-items:flex-end; gap:15px; }.result-topline h2 { font-size:22px; }.download-link { white-space:nowrap; }.preview-stage { min-height:250px; }.preview-controls { flex-wrap:wrap; }.preview-controls input { order:3; flex-basis:100%; }.fps-presets { margin-left:auto; } }