:root{--gold:#ebbc13;--bg:#f1fae8;--ink:#000;--line:rgba(0,0,0,.14);--soft:rgba(0,0,0,.6);--p:0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 'Helvetica Neue',Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden;height:100vh}
.hero{min-height:100vh;display:grid;place-items:center;text-align:center;padding:2rem;position:relative}
.hero img{width:84px;height:84px;object-fit:contain;margin-bottom:1.5rem}
.hero h1{font-size:clamp(2.6rem,9vw,7rem);line-height:.95;letter-spacing:-.04em;margin:0;font-weight:800}
.hero h1 mark{background:linear-gradient(transparent 62%,var(--gold) 62%);color:inherit}
.hero p{max-width:34rem;margin:1.4rem auto 0;color:var(--soft);font-size:1.1rem}
.enter{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;display:grid;gap:.6rem;justify-items:center}
.enter i{width:1px;height:48px;background:var(--ink);animation:drop 1.6s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
#doors{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;cursor:pointer;touch-action:none}
.door{position:relative;width:50%;height:100%;overflow:hidden;background:var(--bg);will-change:transform;box-shadow:0 0 60px rgba(0,0,0,.25)}
.door.l{transform:translate3d(calc(var(--p) * -101%),0,0)}
.door.r{transform:translate3d(calc(var(--p) * 101%),0,0)}
.door .hero{position:absolute;top:0;width:100vw;height:100%;min-height:0}
.door.l .hero{left:0}
.door.r .hero{right:0}
#seam{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:var(--gold);box-shadow:0 0 24px 4px var(--gold);opacity:calc(1 - var(--p) * 4);pointer-events:none}
#app{transform:scale(calc(.94 + var(--p) * .06));opacity:calc(.4 + var(--p) * .6)}
body.open #app{transform:none;opacity:1}
.bar{position:sticky;top:0;z-index:10;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:.8rem 1.5rem;background:rgba(241,250,232,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-.01em}
.brand img{width:28px;height:28px;object-fit:contain}
.brand small{font-weight:500;color:var(--soft)}
.tools{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
select,input,button,.btn{font:inherit;color:var(--ink)}
select,input[type=text],input[type=password]{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.55rem 1rem;width:100%}
button,.btn{background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:.5rem 1.1rem;cursor:pointer;text-decoration:none;font-size:.9rem;transition:.2s;display:inline-block}
button:hover,.btn:hover{background:var(--gold);color:var(--ink)}
.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.total{font-size:.85rem;font-weight:700;padding:.3rem .8rem;border-radius:999px;background:var(--gold)}
.total:empty{display:none}
main{max-width:980px;margin:0 auto;padding:0 1.5rem 6rem}
.phase{padding:6rem 0 1rem}
.phase header{display:flex;align-items:baseline;gap:1.2rem;border-top:2px solid var(--ink);padding-top:1.2rem}
.phase .n{font-size:clamp(3rem,10vw,6.5rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.phase h2{margin:0;font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:-.03em}
.phase .meta{margin-left:auto;font-size:.85rem;font-weight:700}
.track{height:6px;background:var(--line);border-radius:9px;margin:1rem 0 1.6rem;overflow:hidden}
.fill{height:100%;background:var(--gold);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin-top:1.5rem}
.card{display:grid;gap:.5rem;text-align:left;padding:1.4rem;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:22px;cursor:pointer;min-height:150px;align-content:end;transition:transform .25s,box-shadow .25s,background .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(0,0,0,.4);background:#fff}
form.card{cursor:default;align-content:center}
form.card:hover{transform:none}
.pn{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.pp{font-size:.85rem;color:var(--soft)}
.mini{height:5px;background:var(--line);border-radius:9px;overflow:hidden}
.mini i{display:block;height:100%;background:var(--gold)}
.panel{display:grid;gap:.6rem;margin-top:2rem;padding:1.6rem;background:#fff;border:1px solid var(--line);border-radius:22px;max-width:460px}
.panel h3{margin:0 0 .4rem;letter-spacing:-.02em}
.back{margin-top:2.5rem}
.ptitle{font-size:clamp(2.2rem,7vw,4.5rem);letter-spacing:-.04em;line-height:1;margin:1.2rem 0 0;font-weight:800}
.task{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.2rem;margin:.6rem 0;background:#fff;border:1px solid var(--line);border-radius:18px}
.task:hover{box-shadow:0 12px 30px -16px rgba(0,0,0,.35)}
.task.done{background:transparent}
.task.done .t{text-decoration:line-through;opacity:.5}
.chk{appearance:none;-webkit-appearance:none;width:26px;height:26px;border:2px solid var(--ink);border-radius:50%;flex:none;cursor:pointer;display:grid;place-items:center;padding:0;margin:2px 0 0;background:#fff}
.chk:checked{background:var(--gold)}
.chk:checked::after{content:'✓';font-weight:800;font-size:.85rem}
.task .b{flex:1}
.task .t{font-weight:700}
.task .d{color:var(--soft);font-size:.9rem}
.copy{margin-top:.6rem;font-size:.8rem;padding:.35rem .9rem}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
footer{text-align:center;padding:3rem;font-size:.8rem;color:var(--soft)}
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%,20px);background:var(--ink);color:var(--gold);padding:.6rem 1.2rem;border-radius:999px;opacity:0;transition:.3s;pointer-events:none;z-index:60}
.toast.on{opacity:1;transform:translate(-50%,0)}
.login{min-height:100vh;display:grid;place-items:center;padding:1rem}
.login form{background:#fff;border:1px solid var(--line);border-radius:24px;padding:2.2rem;width:min(360px,100%);display:grid;gap:.7rem;text-align:center}
.login img{width:56px;height:56px;margin:0 auto;object-fit:contain}
.login h1{margin:.2rem 0 .6rem;letter-spacing:-.03em;font-size:1.5rem}
.login input{border-radius:14px}
.err{color:#000;background:var(--gold);padding:.4rem .8rem;border-radius:10px;font-size:.85rem;margin:0}
@media(prefers-reduced-motion:reduce){.enter i{animation:none}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}