:root{--ink: #f2e9db;--paper: #100d0e;--paper-soft: #1c171a;--card-bg: #fffdf8;--brass: #c9a44c;--brass-bright: #ddb95f;--velvet-1: #2c0f1f;--velvet-2: #170810;--velvet-slot: #431628;--shadow-color: 0deg 0% 0%;--muted: #b9ab9c;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--ink: #f2e9db;--paper: #0a0708;--paper-soft: #161113;--card-bg: #241c18;--muted: #a99a89}}:root[data-theme=dark]{--ink: #f2e9db;--paper: #0a0708;--paper-soft: #161113;--card-bg: #241c18;--muted: #a99a89}*{box-sizing:border-box}html{height:100%;background:var(--paper)}body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}#root{min-height:100%}h1,h2,h3,.display{font-family:Fraunces,Georgia,Times New Roman,serif;font-weight:500;letter-spacing:-.01em;margin:0}button{font-family:inherit}img{max-width:100%;display:block}.page{position:relative}.hero{position:relative;padding:clamp(28px,6vw,64px) clamp(20px,6vw,72px) calc(clamp(20px,3vw,36px) - (100% / 60));overflow:hidden}.hero-banner-area{margin-bottom:clamp(56px,14vw,110px)}.hero-banner{position:relative;width:100%;aspect-ratio:6 / 1;border-radius:20px;overflow:hidden;background:#150e11;border:1px solid rgba(255,255,255,.06)}.hero-banner img{width:100%;height:100%;object-fit:cover;display:block}.hero-banner-controls{position:absolute;top:12px;right:12px;display:flex;gap:8px}.hero-banner-empty{width:100%;aspect-ratio:6 / 1;border-radius:20px;border:1.5px dashed rgba(201,164,76,.4);background:var(--paper-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--brass-bright);cursor:pointer;transition:border-color .2s ease,background .2s ease}.hero-banner-empty:hover{border-color:#c9a44cb3;background:#c9a44c0d}.hero-banner-empty svg{width:28px;height:28px}.hero-banner-empty .hint{font-size:.85rem;color:var(--muted)}.stage-row{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4vw,34px)}.stage-wrap{--card-h: clamp(240px, 38vw, 420px);position:relative;width:100%;max-width:1120px;margin:0 auto;display:flex;align-items:flex-start;justify-content:center;gap:clamp(14px,4vw,36px)}.stage{position:relative;width:100%;max-width:900px;flex:1;min-width:0;height:calc(var(--card-h) + 60px);margin:0 auto;perspective:1700px;perspective-origin:50% 42%}.stack{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d}.stack-card{position:absolute;top:0;left:50%;height:var(--card-h);border-radius:14px;background:var(--card-bg);overflow:hidden;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.22,.68,0,1),filter 1s ease,opacity 1s ease,box-shadow 1s ease,width 1s ease;will-change:transform;border:1px solid rgba(201,164,76,.25);cursor:pointer}.stack-card .art{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}.stack-card .foil{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 48%,transparent 56%);pointer-events:none}.stage-empty{position:absolute;top:0;left:50%;transform:translate(-50%);width:calc(var(--card-h) * 5.6 / 8);height:var(--card-h);border:1.5px dashed rgba(201,164,76,.5);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;text-align:center;padding:16px;background:var(--paper-soft)}.stage-controls{display:flex;flex-direction:column;align-items:center;gap:14px}.stage-controls .hint{font-size:.82rem;color:var(--muted);max-width:16ch;text-align:center;line-height:1.4}.nav-btn{--btn-size: 180px;width:var(--btn-size);height:var(--btn-size);min-width:var(--btn-size);margin-top:calc((var(--card-h) - var(--btn-size)) / 2 - (var(--card-h) * .1));border-radius:50%;border:1px solid rgba(201,164,76,.22);background:#ffffff08;color:var(--brass-bright);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;opacity:0;filter:saturate(40%);transition:background .2s ease,border-color .2s ease,transform .2s ease,opacity .2s ease,filter .2s ease}.nav-btn:hover{background:#c9a44c1a;border-color:#c9a44c80;opacity:0;filter:saturate(85%)}.nav-btn:active{transform:scale(.94)}.nav-btn svg{width:calc(var(--btn-size) * .37);height:calc(var(--btn-size) * .37)}@media (max-width: 700px){.nav-btn{--btn-size: 138px}}@media (max-width: 420px){.nav-btn{--btn-size: 114px}}.add-btn{width:54px;height:54px;border-radius:50%;border:1px solid rgba(201,164,76,.55);background:var(--card-bg);color:var(--brass);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px -6px #00000059;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;flex-shrink:0}.add-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -6px #0006}.add-btn:active{transform:translateY(0) scale(.96)}.add-btn svg{width:22px;height:22px}.add-btn.small{width:40px;height:40px}.add-btn.small svg{width:17px;height:17px}.add-btn.on-velvet{background:var(--velvet-slot);border-color:#c9a44c99;color:var(--brass-bright)}.case{position:relative;padding:clamp(20px,3vw,36px) clamp(18px,6vw,60px) clamp(60px,9vw,100px);border-top:1px solid rgba(255,255,255,.05)}.case-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto clamp(22px,4vw,36px);flex-wrap:wrap}.case-banner-area{flex:1;min-width:240px;margin-bottom:0}.case-head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.ratio-control{display:flex;align-items:center;gap:4px;font-family:Inter,sans-serif;font-size:.78rem;color:var(--muted);padding:6px 8px;border:1px solid rgba(255,255,255,.12);border-radius:999px}.ratio-control input{width:34px;background:transparent;border:none;color:var(--ink);font-family:inherit;font-size:inherit;text-align:center;outline:none;-moz-appearance:textfield}.ratio-control input::-webkit-outer-spin-button,.ratio-control input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ratio-control span{opacity:.6}.add-collection-row{display:flex;justify-content:center;padding:0 20px clamp(36px,7vw,64px)}.add-collection-btn{display:flex;align-items:center;gap:10px;border:1.5px dashed rgba(201,164,76,.4);background:transparent;color:var(--brass-bright);font-family:Inter,sans-serif;font-size:.9rem;padding:12px 22px;border-radius:999px;cursor:pointer;transition:border-color .2s ease,background .2s ease}.add-collection-btn:hover{border-color:#c9a44cbf;background:#c9a44c0f}.add-collection-btn svg{width:18px;height:18px}.case-tray{max-width:1180px;margin:0 auto;border-radius:26px;background:#150e11;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 12px 30px #0000008c;padding:clamp(18px,3.4vw,32px)}.grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2.4vw,20px)}@media (min-width: 860px){.grid{grid-template-columns:repeat(5,1fr)}}.slot{position:relative;border-radius:10px;background:#110b0e;box-shadow:inset 0 3px 9px #0000008c;border:1px solid rgba(255,255,255,.05);cursor:pointer;overflow:hidden}.slot:before{content:"";display:block;padding-top:calc(var(--ratio-h, 8) / var(--ratio-w, 5.6) * 100%)}.slot .thumb-wrap{position:absolute;inset:clamp(5px,1vw,9px);border-radius:6px;overflow:hidden;box-shadow:0 3px 10px #00000073}.slot img{width:100%;height:100%;object-fit:cover;display:block}.slot .thumb-placeholder{width:100%;height:100%;background:#241d19}.slot .remove{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:none;background:#0a0605b8;color:#e9dcc8;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .18s ease}.slot:hover .remove{opacity:1}.slot .remove svg{width:11px;height:11px}.slot-add{background:transparent;border:1.5px dashed rgba(201,164,76,.45);cursor:pointer;color:var(--brass-bright);transition:border-color .2s ease,background .2s ease}.slot-add:hover{border-color:#c9a44ccc;background:#c9a44c0f}.slot-add svg{position:absolute;top:50%;left:50%;width:26px;height:26px;transform:translate(-50%,-50%)}footer{text-align:center;padding:28px 20px 40px;color:var(--muted);font-size:.78rem;background:var(--paper)}.mode-toggle-bar{display:flex;justify-content:center;padding:0 20px 28px;background:var(--paper)}.mode-toggle{display:flex;align-items:center;gap:10px;border:none;background:transparent;cursor:pointer;padding:6px 4px;color:var(--muted);font-family:Inter,sans-serif;font-size:.78rem}.mode-toggle-track{position:relative;width:40px;height:22px;border-radius:999px;background:#ffffff14;border:1px solid rgba(255,255,255,.1);transition:background .2s ease,border-color .2s ease;flex-shrink:0}.mode-toggle-track.on{background:#c9a44c40;border-color:#c9a44c80}.mode-toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#cbbfae;transition:transform .2s ease,background .2s ease}.mode-toggle-track.on .mode-toggle-thumb{transform:translate(18px);background:var(--brass-bright)}.mode-toggle-label{color:var(--ink);opacity:.8}.detail-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#040203c7;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,32px);z-index:200;animation:detail-fade .22s ease}@keyframes detail-fade{0%{opacity:0}to{opacity:1}}.detail-panel{position:relative;width:100%;max-width:900px;max-height:88vh;overflow-y:auto;background:linear-gradient(165deg,#1c1015,#0b0708);border-radius:20px;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px #000000bf,0 34px 80px -24px #000000d9;padding:clamp(22px,4.5vw,40px)}.detail-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:#0000008c;color:#f0e6d8;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}.detail-close svg{width:14px;height:14px}.detail-body{display:grid;grid-template-columns:minmax(0,250px) 1fr;gap:clamp(22px,4vw,44px)}@media (max-width: 640px){.detail-body{grid-template-columns:1fr}}.detail-art{justify-self:start;align-self:start;width:auto;height:auto;max-width:100%;max-height:55vh;margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid rgba(201,164,76,.3);box-shadow:0 22px 44px -18px #000c}.detail-art img{display:block;width:100%;height:100%;object-fit:cover}.detail-info{display:flex;flex-direction:column;gap:14px;min-width:0}.detail-title{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.3rem,3vw,1.7rem);color:var(--ink);background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.12);padding:4px 2px 10px;outline:none;width:100%}.detail-title:focus{border-bottom-color:var(--brass-bright)}.detail-title::placeholder{color:var(--muted);opacity:.7}.detail-note{font-family:Inter,sans-serif;font-size:.92rem;line-height:1.55;color:var(--ink);background:#0000004d;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px 12px;resize:vertical;min-height:76px;outline:none;width:100%}.detail-note::placeholder{color:var(--muted)}.detail-note:focus{border-color:#c9a44c80}.detail-title-view{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.3rem,3vw,1.7rem);color:var(--ink);margin:0;padding:4px 2px 10px}.detail-note-view{font-family:Inter,sans-serif;font-size:.92rem;line-height:1.55;color:var(--muted);margin:0}.detail-process-label{font-family:Fraunces,serif;font-style:italic;color:var(--brass-bright);font-size:.95rem;margin-top:4px}.detail-slot-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:6px;border-top:1px solid rgba(255,255,255,.06)}.detail-slot-hint{margin:4px 0 0;font-size:.78rem;line-height:1.4;color:var(--muted);max-width:34ch}.detail-select{font-family:Inter,sans-serif;font-size:.92rem;color:var(--ink);background:#00000059;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 10px;outline:none;flex-shrink:0}.detail-select:focus{border-color:#c9a44c99}.detail-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.process-slot{position:relative;aspect-ratio:1 / 1;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#17111a,#0a0708);box-shadow:inset 0 3px 8px #0000008c;border:1px solid rgba(255,255,255,.05)}.process-slot img,.process-slot video{width:100%;height:100%;object-fit:cover;display:block}.process-slot .remove{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;border:none;background:#0a0605b8;color:#e9dcc8;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .18s ease}.process-slot:hover .remove{opacity:1}.process-slot .remove svg{width:10px;height:10px}.process-slot-add{border:1.5px dashed rgba(201,164,76,.4);background:transparent;color:var(--brass-bright);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .2s ease,background .2s ease}.process-slot-add:hover{border-color:#c9a44cbf;background:#c9a44c0f}.process-slot-add svg{width:20px;height:20px}@media (prefers-reduced-motion: reduce){.stack-card{transition:none!important}}.app-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:Inter,sans-serif;font-size:.95rem}.save-warning{position:sticky;top:0;z-index:300;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 18px;background:#4a1210;color:#f3e2df;font-size:.85rem;line-height:1.4}.save-warning button{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:none;background:#ffffff1f;color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer}.save-warning button svg{width:11px;height:11px}.backup-controls{display:flex;gap:8px}.backup-btn{font-family:Inter,sans-serif;font-size:.78rem;color:var(--muted);background:transparent;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 14px;cursor:pointer;transition:border-color .2s ease,color .2s ease}.backup-btn:hover{border-color:#c9a44c99;color:var(--ink)}