:root{--ink:#1b2430;--ink-soft:#2a3445;--linen:#faf5ec;--linen-deep:#f1e6d3;--kraft:#d9b98c;--kraft-deep:#b8925f;--coral:#e8693a;--coral-deep:#c44f24;--teal:#1f6f6b;--teal-deep:#14504c;--graphite:#4b5160;--line:#1b24301f;--bg:var(--linen);--bg-elevated:#fff;--bg-sunken:var(--linen-deep);--text:var(--ink);--text-muted:var(--graphite);--accent:var(--coral);--accent-deep:var(--coral-deep);--accent-2:var(--teal);--border:var(--line);--board-area:#11161f;--shadow:#1b160e2e;--font-display:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;--font-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}[data-theme=dark]{--bg:#161b22;--bg-elevated:#1f2630;--bg-sunken:#11151b;--text:#f1ece1;--text-muted:#aab2c0;--border:#f1ece11f;--board-area:#0a0d12;--shadow:#00000073}[data-contrast=high]{--bg:#000;--bg-elevated:#000;--bg-sunken:#000;--text:#fff;--text-muted:#fff;--border:#fff;--accent:#ffd43a;--accent-deep:#ffd43a;--board-area:#000}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;padding:0}body{font-family:var(--font-body);font-size:16px;line-height:1.5}#root{height:100%;min-height:100vh}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;margin:0}button{font-family:inherit}img,svg{max-width:100%;display:block}a{color:var(--accent)}button,[role=button]{cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.btn{justify-content:center;align-items:center;gap:var(--space-2);min-width:44px;min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--text);box-shadow:0 1px 2px var(--shadow);border:1px solid #0000;font-size:15px;font-weight:600;transition:transform .12s,box-shadow .12s;display:inline-flex}.btn:active{transform:scale(.96)}.btn-primary{background:var(--accent);color:#fff5ec}.btn-ghost{border-color:var(--border);background:0 0}.btn-icon{width:44px;padding:0}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip-link{background:var(--accent);color:#fff;padding:var(--space-2) var(--space-4);z-index:1000;border-radius:0 0 var(--radius-sm) 0;position:absolute;top:0;left:-999px}.skip-link:focus{left:0}.app-header{align-items:center;gap:var(--space-2);padding:calc(var(--safe-top) + var(--space-2)) var(--space-3) var(--space-2);background:var(--bg);z-index:20;border-bottom:1px solid var(--border);display:flex;position:sticky;top:0}.app-header__title{text-align:center;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:19px;font-weight:600;overflow:hidden}.app-header__side{align-items:center;width:44px;display:flex}.app-header__side--right{justify-content:flex-end}.sheet-backdrop{z-index:100;background:#0a0a0c73;justify-content:center;align-items:flex-end;animation:.16s fadeIn;display:flex;position:fixed;inset:0}.sheet{background:var(--bg-elevated);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:560px;padding:var(--space-3) var(--space-5) calc(var(--space-6) + var(--safe-bottom));box-shadow:0 -8px 30px var(--shadow);animation:.2s slideUp}.sheet__handle{background:var(--border);width:40px;height:4px;margin:0 auto var(--space-4);border-radius:2px}.sheet__title{margin-bottom:var(--space-4);font-size:20px}.sheet__row{padding:var(--space-3) 0;border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;font-size:15px;display:flex}.sheet__row--column{align-items:flex-start;gap:var(--space-2);flex-direction:column}.sheet__close{width:100%;margin-top:var(--space-5)}.toggle{background:var(--border);border:none;border-radius:15px;width:50px;height:30px;padding:3px;transition:background .15s;position:relative}.toggle.is-on{background:var(--accent)}.toggle__thumb{background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .15s;display:block}.toggle.is-on .toggle__thumb{transform:translate(20px)}.segmented{border-radius:var(--radius-md);background:var(--bg-sunken);width:100%;padding:3px;display:flex}.segmented__item{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:0 0;border:none;flex:1;min-height:38px;font-size:14px;font-weight:600}.segmented__item.is-active{background:var(--bg-elevated);box-shadow:0 1px 3px var(--shadow)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:.6;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.image-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);text-align:left;width:100%;box-shadow:0 2px 6px var(--shadow);flex-direction:column;padding:0;transition:transform .14s,box-shadow .14s;display:flex;overflow:hidden}.image-card:active{transform:scale(.97)}.image-card__art{aspect-ratio:1;background:var(--bg-sunken);clip-path:url(#card-notch);width:100%;display:block}.image-card__art img{object-fit:cover;width:100%;height:100%}.image-card__meta{padding:var(--space-3) var(--space-3) var(--space-4);flex-direction:column;gap:2px;display:flex}.image-card__title{color:var(--text);font-size:15px;font-weight:700}.image-card__category{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:12px}@media (hover:hover){.image-card:hover{box-shadow:0 6px 18px var(--shadow);transform:translateY(-2px)}}.screen{background:var(--bg);min-height:100vh;padding-bottom:calc(var(--space-6) + var(--safe-bottom));flex-direction:column;display:flex}.home-screen__intro{padding:var(--space-4) var(--space-4) 0}.home-screen__intro h2{margin-bottom:var(--space-1);font-size:26px}.home-screen__intro p{color:var(--text-muted);margin:0;font-size:14px}.upload-cta{margin:var(--space-4);align-items:center;gap:var(--space-3);background:var(--ink);color:#fdf8ee;border-radius:var(--radius-lg);padding:var(--space-4);border:none;min-height:44px;display:flex}.upload-cta__icon{background:var(--accent);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.upload-cta span:last-child{text-align:left;flex-direction:column;gap:2px;display:flex}.upload-cta strong{font-size:15px}.upload-cta small{color:#fdf8eeb3;font-size:12px}.chip-row{gap:var(--space-2);padding:0 var(--space-4);margin-bottom:var(--space-4);scrollbar-width:none;display:flex;overflow-x:auto}.chip-row::-webkit-scrollbar{display:none}.chip{border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);padding:0 var(--space-4);border-radius:999px;flex-shrink:0;height:38px;font-size:13px;font-weight:600}.chip.is-active{background:var(--ink);color:#fdf8ee;border-color:var(--ink)}.gallery-grid{gap:var(--space-3);padding:0 var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}@media (width>=640px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}@media (width>=960px){.gallery-grid{grid-template-columns:repeat(4,1fr);max-width:1100px;margin:0 auto}.home-screen__intro,.upload-cta,.chip-row{width:100%;max-width:1100px;margin-left:auto;margin-right:auto}}.cropper{padding:var(--space-4);gap:var(--space-4);flex-direction:column;flex:1;display:flex}.cropper__frame-wrap{flex:1;justify-content:center;align-items:center;min-height:0;display:flex}.cropper__frame{border-radius:var(--radius-md);width:100%;max-width:100%;max-height:60vh;box-shadow:0 4px 24px var(--shadow);position:relative;overflow:hidden}.cropper__canvas{touch-action:none;width:100%;height:100%;display:block}.cropper__controls{gap:var(--space-3);flex-direction:column;display:flex}.cropper__aspects{margin-bottom:0;padding:0}.cropper__row{gap:var(--space-3);justify-content:center;display:flex}.cropper__row--actions{justify-content:space-between}.cropper__row--actions .btn{flex:1}.upload-screen{flex-direction:column;display:flex}.upload-screen__body{padding:var(--space-5);justify-content:center;align-items:center;gap:var(--space-3);flex-direction:column;flex:1;display:flex}.upload-dropzone{border:2px dashed var(--border);border-radius:var(--radius-lg);width:100%;max-width:420px;padding:var(--space-7) var(--space-5);align-items:center;gap:var(--space-2);text-align:center;color:var(--text-muted);background:var(--bg-elevated);flex-direction:column;display:flex}.upload-dropzone p{color:var(--text);margin:0;font-weight:600}.upload-dropzone__hint{font-size:13px}.upload-screen__error{color:var(--coral-deep);text-align:center;font-size:14px}.difficulty-screen__preview{align-items:center;gap:var(--space-3);padding:var(--space-4);display:flex}.difficulty-screen__preview img{border-radius:var(--radius-md);object-fit:cover;width:64px;height:64px}.difficulty-screen__preview div{flex-direction:column;display:flex}.difficulty-screen__preview span{color:var(--text-muted);font-size:13px}.difficulty-grid{gap:var(--space-3);padding:var(--space-2) var(--space-4) var(--space-5);grid-template-columns:repeat(2,1fr);display:grid}@media (width>=640px){.difficulty-grid{grid-template-columns:repeat(3,1fr);max-width:720px;margin:0 auto}}.difficulty-card{align-items:center;gap:var(--space-1);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-2);box-shadow:0 2px 6px var(--shadow);flex-direction:column;display:flex}.difficulty-card:active{transform:scale(.96)}.difficulty-card__count{font-family:var(--font-display);font-size:30px;font-weight:700}.difficulty-card__grid{color:var(--text-muted);font-size:13px}.diff-pill{margin-top:var(--space-2);text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700}.diff-pill--easy{color:var(--teal-deep);background:#1f6f6b26}.diff-pill--medium{color:var(--coral-deep);background:#e8693a26}.diff-pill--hard{color:#6b3fae;background:#9b6be02e}.diff-pill--expert{color:var(--ink);background:#1b24301f}.stats-bar{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--bg-elevated);border-bottom:1px solid var(--border);display:flex}.stats-bar__item{flex-direction:column;min-width:56px;display:flex}.stats-bar__item--right{align-items:flex-end}.stats-bar__label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:10px}.stats-bar__value{font-variant-numeric:tabular-nums;font-size:15px;font-weight:700}.stats-bar__progress{align-items:center;gap:var(--space-2);flex:1;display:flex}.stats-bar__track{background:var(--bg-sunken);border-radius:999px;flex:1;height:8px;overflow:hidden}.stats-bar__fill{background:linear-gradient(90deg, var(--accent), var(--accent-2));border-radius:999px;height:100%;transition:width .22s}.stats-bar__percent{color:var(--text-muted);text-align:right;min-width:34px;font-size:12px;font-weight:700}.toolbar{background:var(--bg-elevated);border-top:1px solid var(--border);padding:var(--space-2) var(--space-2) calc(var(--space-2) + var(--safe-bottom));gap:var(--space-1);flex-direction:column;display:flex}.toolbar__row{justify-content:space-around;gap:var(--space-1);display:flex}.tool-btn{border-radius:var(--radius-sm);max-width:64px;height:44px;color:var(--text);background:0 0;border:none;flex:1;justify-content:center;align-items:center;display:flex}.tool-btn:active{background:var(--bg-sunken)}.tool-btn.is-active{color:var(--accent)}.tool-btn:disabled{opacity:.35}.preview-modal{z-index:200;padding:var(--space-5);background:#0a0a0cd9;justify-content:center;align-items:center;animation:.16s fadeIn;display:flex;position:fixed;inset:0}.preview-modal img{border-radius:var(--radius-md);max-width:100%;max-height:100%;box-shadow:0 10px 40px #00000080}.preview-modal__close{top:calc(var(--safe-top) + var(--space-3));right:var(--space-4);color:#fff;background:#ffffff26;position:absolute}.completion-modal{z-index:250;padding:var(--space-5);background:#0a0a0c99;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.completion-card{background:var(--bg-elevated);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);text-align:center;width:100%;max-width:380px;box-shadow:0 20px 60px var(--shadow);animation:.26s cubic-bezier(.2,.8,.3,1.2) pop}.completion-card__badge{margin-bottom:var(--space-2);font-size:44px;display:block}.completion-card h2{margin-bottom:var(--space-1);font-size:24px}.completion-card__subtitle{color:var(--text-muted);margin:0 0 var(--space-5)}.completion-stats{margin-bottom:var(--space-5);justify-content:space-around;display:flex}.completion-stats>div{flex-direction:column;display:flex}.completion-stats__value{font-family:var(--font-display);font-size:22px;font-weight:700}.completion-stats__label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:11px}.completion-actions{gap:var(--space-2);flex-direction:column;display:flex}@keyframes pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.workspace-screen{flex-direction:column;height:100vh;padding-bottom:0;display:flex;overflow:hidden}.workspace-canvas-area{background:#11161f;flex:1;min-height:0;position:relative}.workspace-canvas{touch-action:none;width:100%;height:100%;display:block}.workspace-loading{color:#f1ece1;justify-content:center;align-items:center;font-weight:600;display:flex;position:absolute;inset:0}.workspace-pause-overlay{background:#0a0a0c99;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}