:root{--navy:#1b1640;--cream:#fbf3e6;--pink:#ff7ab8;--mint:#7CFF9B;--sky:#8FD3FF;--lav:#c9b8ff}
*{box-sizing:border-box}body{margin:0;font:17px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;background:radial-gradient(circle at 30% 0,#3a2d7a,#1b1640 60%) fixed;min-height:100vh}
.top{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;gap:8px}.home-btn{background:none;border:0;color:#fff;font-weight:800;font-size:1rem}.who{font-size:.85rem;opacity:.9}
main{max-width:720px;margin:0 auto;padding:6px 14px 30px}.foot{text-align:center;font-size:.75rem;opacity:.7;padding:20px}
button{font:inherit;cursor:pointer}.link{background:none;border:0;color:var(--sky);text-decoration:underline;font-size:inherit;padding:0}
.say{display:flex;gap:10px;align-items:flex-end;margin:12px 0}.lumet{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:2px solid rgba(255,255,255,.7);box-shadow:0 0 18px #ff7ab8aa;flex:none}
.bubble{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:18px 18px 18px 4px;padding:10px 14px;backdrop-filter:blur(6px)}.bubble.mini{margin:8px 0;border-radius:14px}
.card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px;margin:12px 0}
label{display:block;font-weight:700;margin-bottom:10px}input,textarea{display:block;width:100%;margin-top:6px;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.95);color:var(--navy);font:inherit}
.btn{border:0;border-radius:14px;padding:11px 16px;margin:4px;background:linear-gradient(135deg,#b9a5ff,#ff8fc8);color:var(--navy);font-weight:800;box-shadow:0 0 14px #ff8fc855;text-decoration:none;display:inline-block;text-align:center}
.btn.big{padding:14px 22px;font-size:1.05rem;width:100%;margin:6px 0}.btn.ghost{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.35)}.btn.small{font-size:.85rem}.btn.done{background:linear-gradient(135deg,#7CFF9B,#8FD3FF)}.btn:disabled{opacity:.55}
.btn.ask{background:linear-gradient(135deg,#FFE36E,#ff8fc8);margin:8px 0}
.row{display:flex;gap:6px;flex-wrap:wrap}.row .btn.big{flex:1}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px}.grid2 .btn{margin:0}
.doors{display:grid;gap:12px}.door{display:grid;text-align:left;gap:2px;padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.4);background:linear-gradient(135deg,rgba(185,165,255,.35),rgba(255,143,200,.25));color:#fff}.door b{font-size:1.3rem}.door .ico{font-size:1.6rem;color:var(--mint)}
.chip{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:6px 12px;margin:3px;font-size:.85rem}.chip.on{background:#fff;color:var(--navy)}
.cats{display:flex;overflow-x:auto;padding:8px 0;scrollbar-width:none}.cats .chip{flex:none}
.mats{max-height:52vh;overflow:auto}.mat{display:flex;align-items:center;gap:6px;border-bottom:1px solid rgba(255,255,255,.12)}.pick{flex:1;display:grid;grid-template-columns:18px 1fr;column-gap:8px;text-align:left;background:none;border:0;color:#fff;padding:9px 2px}.pick span:last-child{grid-column:2;font-size:.82rem;opacity:.8}.dot{width:14px;height:14px;border-radius:50%;margin-top:4px;box-shadow:0 0 8px currentColor}.more{color:var(--sky);font-size:.8rem}
.tabs{display:flex;flex-wrap:wrap;gap:4px}.tab{flex:1 1 45%;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff}.tab.on{background:#fff;color:var(--navy);font-weight:800}
.strip{display:flex;flex-wrap:wrap;align-items:center}.count{font-size:.8rem;opacity:.8;margin-left:6px}
/* stage: cream so raster parts on cream backgrounds blend (multiply) */
.stage{position:relative;aspect-ratio:4/3;border-radius:22px;background:#fdf5ea;perspective:900px;overflow:hidden;margin:8px 0;box-shadow:inset 0 0 40px #d9c6ff66;touch-action:pan-y}
.stage::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(120,140,220,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(120,140,220,.12) 1px,transparent 1px);background-size:20px 20px}
.rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.alive .rig{animation:float 5s ease-in-out infinite}@keyframes float{50%{translate:0 -8px}}
.ly{position:absolute;inset:0;transform:translateZ(var(--z));transition:transform .6s cubic-bezier(.3,1.4,.5,1),opacity .6s;pointer-events:none}
.alive .ly{transform:translateZ(calc(var(--z)*2.2))}
.ly svg{position:absolute;inset:0;width:100%;height:100%}.ly .real{position:absolute;inset:0}.ly .real *{pointer-events:visiblePainted}
.pimg{position:absolute;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);object-fit:contain;pointer-events:auto}
.gh{position:absolute;inset:0;opacity:0;transition:opacity .4s}.gh svg *{stroke-dasharray:5 4;stroke:#6aa8ff!important}
.apart .gh{opacity:.45}.apart .ly{pointer-events:auto;cursor:pointer}
.ly.off .real{transform:translate(calc(var(--dx)*1.6 + 0px),calc(var(--dy)*1.6 + 40px)) scale(.8);opacity:.25;transition:transform .6s,opacity .6s}.ly .real{transition:transform .6s cubic-bezier(.3,1.5,.5,1),opacity .6s}
.candy{animation:blink 2.4s infinite}@keyframes blink{50%{opacity:.35}}.pulse{animation:blink 1.8s infinite}
.spin{animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.ttl{text-align:center;margin:6px 0}
.blueprint,.patent{background:#eef4ff;color:var(--navy);border-radius:18px;padding:16px;margin:14px 0;background-image:linear-gradient(rgba(60,90,200,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(60,90,200,.08) 1px,transparent 1px);background-size:18px 18px}
.blueprint h2,.patent h2{margin-top:0}.bl li{margin-bottom:8px}.scale{background:#fff6d6;border-radius:10px;padding:10px;font-size:.9rem}.copy{font-weight:700;margin-top:12px}
.warn{background:#ffe1ec;color:#7a1640;border-radius:10px;padding:10px;font-weight:700}.patent h3{margin:12px 0 4px;font-size:1rem}
.small{font-size:.82rem;opacity:.85}.art{width:100%;border-radius:14px}
.pcard{display:grid;grid-template-columns:110px 1fr;gap:12px;background:rgba(255,255,255,.08);border-radius:16px;padding:10px;margin:8px 0;border:1px solid rgba(255,255,255,.2)}.pcard p{margin:4px 0}.pcard a{color:var(--sky)}
.empty{aspect-ratio:1;border:2px dashed rgba(255,255,255,.5);border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.7rem;padding:6px;opacity:.85}
.progress{font-weight:800;color:var(--mint);margin-top:8px}.snap .pcard{animation:snap .6s cubic-bezier(.3,1.6,.5,1)}@keyframes snap{from{transform:translateY(-60px) scale(.8);opacity:0}}
.nt{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ntc{display:grid;gap:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:16px;padding:12px;color:#fff;text-decoration:none;font-size:.85rem}.ntc b{font-size:1rem}.vid{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(135deg,#b9a5ff55,#ff8fc855);font-size:.75rem}
h3{margin:16px 0 6px}.saved{display:flex;flex-wrap:wrap}
@media print{body{background:#fff;color:#000}.top,.foot,.say,.row,#hint,.btn{display:none!important}.stage{break-inside:avoid;box-shadow:none}.blueprint,.patent{background:#fff}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.pslice{width:110px;aspect-ratio:1;object-fit:contain;border-radius:12px;background:#fbf3e6}
/* pastel lab theme */
body{color:var(--navy);background:#efe6ff url(/app/bg.jpg) center/cover fixed}
.top{background:rgba(255,255,255,.55);backdrop-filter:blur(10px)}.home-btn{color:var(--navy)}.link{color:#5a3fd0}
main{background:rgba(255,255,255,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:24px;margin:10px auto;box-shadow:0 0 30px rgba(255,170,220,.45),0 0 60px rgba(140,230,240,.3)}
.foot{color:var(--navy);opacity:.85}
.bubble{background:rgba(255,255,255,.85);border-color:rgba(185,165,255,.6);color:var(--navy)}
.card,.pcard,.ntc{background:rgba(255,255,255,.7);border-color:rgba(185,165,255,.55);color:var(--navy)}
.door{color:var(--navy);background:linear-gradient(135deg,rgba(201,184,255,.75),rgba(255,184,220,.7),rgba(160,240,240,.7));border-color:#fff}.door .ico{color:#ff5fa8}
.chip,.tab{color:var(--navy);border-color:rgba(90,63,208,.4);background:rgba(255,255,255,.7)}.chip.on,.tab.on{background:#5a3fd0;color:#fff}
.btn.ghost{color:var(--navy);background:rgba(255,255,255,.75);border-color:rgba(90,63,208,.4)}
.pick{color:var(--navy)}.mat{border-color:rgba(90,63,208,.15)}.more,.pcard a{color:#5a3fd0}.progress{color:#2f9c6a}
.empty{border-color:rgba(90,63,208,.45)}.lumet{border-color:#fff}
.splash{width:100%;border-radius:20px;display:block;max-height:58vh;object-fit:cover;object-position:50% 40%;box-shadow:0 0 24px rgba(255,170,220,.6)}
/* review fixes: 48px tap targets, modal gate, back button, portfolio print */
button,.btn,.chip,.tab,.link,.ext,a.btn,.pick{min-height:48px;min-width:48px}
.link{display:inline-flex;align-items:center;padding:0 6px}
.back-btn{background:rgba(255,255,255,.8);border:1px solid rgba(90,63,208,.4);border-radius:12px;color:var(--navy);font-weight:800;padding:0 12px}
.ext{font:inherit;cursor:pointer;text-align:left}.ext.more{background:none;border:0;color:#5a3fd0;text-decoration:underline;padding:0 6px}
.ntc{border-radius:16px;min-height:120px}
.modal{position:fixed;inset:0;background:rgba(27,22,64,.45);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}.modal .card{background:#fff;max-width:420px;width:100%}
.shape{display:grid;gap:4px;justify-items:center;background:rgba(255,255,255,.75);border:1px solid rgba(90,63,208,.35);border-radius:16px;padding:8px;color:var(--navy);font-weight:700}.shape img{width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.season ul{margin:6px 0;padding-left:4px;list-style:none}.soft{background:#fff3f8}
.change{border:2px dashed #8a7ad8;border-radius:12px;padding:10px;margin-top:12px}.change .lines{height:110px;background:repeating-linear-gradient(transparent 0 26px,#b9b0e8 26px 27px)}
.date{font-weight:700;margin:0}.mlist{columns:2;font-size:.92rem}.own{font-style:italic}
@media print{.modal,.season,.back-btn{display:none!important}main{background:#fff;box-shadow:none}.change{break-inside:avoid}#pt{break-before:page}}
.art.tall{max-height:52vh;object-fit:contain;background:#fbf3e6}
.ghostbp{position:relative;width:min(220px,60%);margin:8px auto;aspect-ratio:275/620}.ghostbp img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:14px}
.ghostbp>img.fade{filter:grayscale(1) brightness(1.25) contrast(.6);opacity:.35}
.ghostbp .fill{position:absolute;inset:0;clip-path:inset(calc(100% - var(--p)) 0 0 0);transition:clip-path .8s cubic-bezier(.3,1.4,.5,1)}
.pcat{margin:14px 0 6px;font-size:1rem}.tools{display:grid;gap:10px}
.tools .empty{flex-direction:column;overflow-wrap:anywhere;width:110px}
.ghostbp.sq{aspect-ratio:1;width:min(260px,70%)}
.skin{text-align:left;width:100%;color:var(--navy);cursor:pointer}.skin.on{outline:3px solid #ff5fa8}
.credit-line{text-align:center;margin:4px 0 10px;font-size:1rem}
.rule{background:#fff3c4;border:2px solid #ffb020;color:#5a3a00;border-radius:14px;padding:10px 12px;margin:8px 0;font-weight:600}
.hilc{text-align:center;font-size:.8rem;opacity:.85;margin:4px 0}
.xstage{position:relative;width:100%;max-width:640px;margin:8px auto;aspect-ratio:5/6;border-radius:16px;overflow:hidden;background:#f3f8ff;background-image:linear-gradient(#cfe0f5 1px,transparent 1px),linear-gradient(90deg,#cfe0f5 1px,transparent 1px);background-size:5% 4.1667%}
.xlines{position:absolute;inset:0;width:100%;height:100%;z-index:1}.xlines line{stroke:#4a6fa5;stroke-width:.25;opacity:0}
.xhero{position:absolute;left:30%;top:33.3%;width:40%;height:33.3%;object-fit:cover;border-radius:50%;z-index:1;box-shadow:0 2px 10px #0002}
.xglow{position:absolute;left:28%;top:31.7%;width:44%;height:36.7%;border-radius:50%;z-index:0;box-shadow:0 0 0 3px #7fd8a8,0 0 30px 10px #b9f0d1;opacity:0}
.xglow.on{animation:xg 1.6s ease-out 1 forwards}@keyframes xg{0%{opacity:0;transform:scale(.9)}40%{opacity:1}100%{opacity:.25;transform:scale(1.04)}}
.xpart{position:absolute;width:14%;aspect-ratio:1;padding:0;border:2px solid #fff;border-radius:14px;background:#fbf3e6;box-shadow:0 2px 6px #0003;cursor:pointer;will-change:transform,left,top}
.xpart img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}.xpart span{font-size:clamp(.45rem,2vw,.6rem);padding:3px;display:flex;align-items:center;justify-content:center;height:100%;box-sizing:border-box;overflow:hidden;line-height:1.1;color:#4a6fa5}
.xlab{position:absolute;left:50%;top:102%;transform:translateX(-50%);width:135%;font-style:normal;font-size:clamp(.5rem,1.9vw,.72rem);line-height:1.1;font-weight:700;color:#23406b;background:#ffffffd9;border-radius:6px;padding:1px 3px;opacity:0;transition:opacity .4s;pointer-events:none}
.xpart.out .xlab{opacity:1}
.xcard{position:absolute;z-index:5;width:min(60%,300px);transform:translate(-50%,-50%);background:#fff;border:2px solid #7fd8a8;border-radius:12px;padding:8px 10px;font-size:.8rem;box-shadow:0 4px 14px #0003;transition:transform .45s ease-in,opacity .45s ease-in}
.xcard p{margin:4px 0 0}.xcard.shrink{transform:translate(-50%,-50%) scale(.2);opacity:0}
.xc{position:absolute;right:6px;bottom:2px;margin:0;font-size:.6rem;color:#4a6fa5;z-index:6}
@media (prefers-reduced-motion:reduce){.xglow.on{animation:none;opacity:.3}.xcard,.xlab{transition:none}}