:root{
  --navy:#1e2370;--ink:#141850;--gold:#ffc83d;--red:#ff3f6c;--pink:#ff5fa2;--sky:#4cc9f0;--blue:#3a86ff;--purple:#7b5cff;
  --cream:#f4f6ff;--paper:#eef1ff;--text:#eef0ff;--muted:#c3c8ff;--green:#1fa463;--dim:#5a5f8f;--line:#dfe3fa;
  --goldg:linear-gradient(180deg,#ffe36e 0%,#ffb703 100%);
  --indg:linear-gradient(135deg,#4a4fe0 0%,#7b5cff 100%);
  --hero:linear-gradient(135deg,#2b2f9e 0%,#5a3fd6 55%,#c04fd6 100%);
  --greeng:linear-gradient(180deg,#3ddc84 0%,#1fa463 100%);
  --pinkg:linear-gradient(180deg,#ff7aa2 0%,#ef2d56 100%);
  --soft:0 10px 28px rgba(40,50,150,.13),0 2px 6px rgba(40,50,150,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#070822;font-family:'M PLUS Rounded 1c',system-ui,sans-serif;color:var(--navy)}
button{font-family:inherit;cursor:pointer}
img{user-select:none;-webkit-user-drag:none}
#bg{position:fixed;inset:0;background:radial-gradient(1100px 700px at 25% 15%,#4b3fd6 0%,#1b1f6b 45%,#070822 100%)}
#bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 2px);background-size:24px 24px}
#device{position:fixed;left:50%;top:50%;width:max-content;transform-origin:center center}
#device.framed{padding:26px;border-radius:58px;background:linear-gradient(145deg,#4a4d5a,#16171d 40%,#2c2e38);box-shadow:0 0 0 2px #6b6f80 inset,0 40px 90px rgba(0,0,0,.65),0 0 80px rgba(123,92,255,.25)}
#device.framed::before{content:"";position:absolute;top:11px;left:50%;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:#0a0b10;box-shadow:0 0 0 2px #262833}
#stage{width:1194px;height:834px;position:relative;overflow:hidden;background:var(--cream)}
#device.framed #stage{border-radius:34px}
#fx{position:absolute;left:0;top:0;width:1194px;height:834px;pointer-events:none;z-index:80}
#device.framed #fx{left:26px;top:26px}
.app{display:flex;width:100%;height:100%;background:linear-gradient(160deg,#f6f8ff 0%,#eef2ff 55%,#fdf0fb 100%)}
.app::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(123,92,255,.07) 1.5px,transparent 2px);background-size:22px 22px}
/* rail */
.rail{width:104px;flex:none;position:relative;z-index:2;background:linear-gradient(180deg,#2a2f9a 0%,#1b1f6b 60%,#141850 100%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 0;box-shadow:4px 0 24px rgba(20,24,80,.25)}
.rail .logo{width:54px;height:54px;border-radius:16px;margin-bottom:8px;box-shadow:0 0 0 3px rgba(255,255,255,.25),0 6px 16px rgba(0,0,0,.3)}
.rl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:84px;height:72px;border-radius:20px;color:var(--muted);font-weight:800;font-size:12px;background:none;border:0;transition:background .2s,transform .1s,color .2s}
.rl:active{transform:scale(.93)}
.rl.on{background:var(--goldg);color:#4a2c00;box-shadow:0 0 0 3px rgba(255,255,255,.35),0 6px 18px rgba(255,183,3,.55)}
.rl svg{width:27px;height:27px}
.main{flex:1;min-width:0;height:100%;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:18px;position:relative;z-index:1;scrollbar-width:thin}
.top{display:flex;align-items:center;gap:14px}
.h1{font-family:'Dela Gothic One',sans-serif;font-size:29px;margin:0;line-height:1.15;color:var(--ink)}
.h2{font-family:'Dela Gothic One',sans-serif;font-size:21px;margin:0;color:var(--ink)}
.kick{font-family:'Luckiest Guy',cursive;font-size:18px;letter-spacing:1px;color:var(--pink)}
.pts{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--goldg);color:#4a2c00;border-radius:999px;padding:7px 18px;font-weight:800;font-size:18px;white-space:nowrap;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 #e08a00,0 8px 18px rgba(255,160,0,.3)}
.pts svg{stroke:#4a2c00}
.icon-btn{width:52px;height:52px;border-radius:18px;border:0;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--purple);box-shadow:var(--soft)}
.rbar .icon-btn{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.card{background:#fff;border:2px solid var(--line);border-radius:26px;box-shadow:var(--soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;border:0;background:var(--goldg);color:#4a2c00;font-weight:800;font-size:18px;box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 5px 0 #e08a00,0 10px 22px rgba(255,160,0,.32);transition:transform .1s,box-shadow .1s}
.btn:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 2px 0 #e08a00,0 4px 10px rgba(255,160,0,.3)}
.btn.navy{background:var(--indg);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 5px 0 #3236b0,0 10px 22px rgba(90,80,240,.32)}
.btn.ghost{background:#fff;color:var(--purple);box-shadow:inset 0 0 0 2px var(--line),0 4px 0 #d3d8f5}
.btn.red{background:var(--pinkg);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 5px 0 #b81d40,0 10px 22px rgba(239,45,86,.32)}
.btn[disabled]{opacity:.45;filter:saturate(.6)}
.bar{height:12px;border-radius:999px;background:#e6e9fb;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4cc9f0,#7b5cff);transition:width .6s}
.tag{display:inline-flex;align-items:center;font-weight:800;font-size:13px;padding:6px 14px;border-radius:999px}
.locked img.cv{filter:grayscale(.75) brightness(.75)}
.lockpin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.lockpin span{background:rgba(20,24,80,.85);color:#fff;font-weight:800;font-size:13px;padding:7px 14px;border-radius:999px;display:flex;gap:6px;align-items:center;backdrop-filter:blur(4px)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.side{width:262px;flex:none;position:relative;z-index:1;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border-right:2px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.bk{display:flex;align-items:center;gap:12px;width:100%;min-height:76px;padding:8px 12px;border-radius:18px;border:2px solid transparent;background:transparent;text-align:left;font-weight:800;font-size:15px;color:var(--ink)}
.bk.on{background:#fff;border-color:var(--line);box-shadow:var(--soft)}
.bk img{width:44px;height:60px;object-fit:cover;object-position:top;border-radius:8px;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.bk small{display:block;font-weight:500;font-size:13px;color:var(--dim)}
.casecard{display:flex;background:#fff;border:2px solid var(--line);border-radius:24px;overflow:hidden;text-align:left;padding:0;min-height:190px;color:var(--ink);box-shadow:var(--soft);transition:transform .15s,box-shadow .15s}
.casecard:active{transform:scale(.98)}
.casecard .thumb{width:130px;flex:none;object-fit:cover;object-position:top;height:auto}
.casecard .body{flex:1;min-width:0;padding:16px;display:flex;flex-direction:column;gap:6px}
.casecard .t{font-family:'Dela Gothic One',sans-serif;font-size:19px;line-height:1.2}
.casecard .s{font-size:14px;color:var(--dim)}
/* reader */
.rdr{display:flex;flex-direction:column;width:100%;height:100%;background:linear-gradient(160deg,#252a8f 0%,#1b1f6b 60%,#2a1d6b 100%);color:var(--text)}
.rbar{height:68px;flex:none;background:linear-gradient(90deg,#141850,#2b2f9e 60%,#5a3fd6);display:flex;align-items:center;gap:14px;padding:0 16px;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.rbar .ttl{font-family:'Dela Gothic One',sans-serif;font-size:19px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.rbar .sub{font-size:12px;font-weight:800;color:var(--muted)}
.rbody{flex:1;min-height:0;display:flex;gap:16px;padding:16px}
.book{position:relative;width:854px;height:640px;perspective:2600px;touch-action:pan-y;filter:drop-shadow(0 16px 30px rgba(0,0,0,.35))}
.leaf{position:absolute;left:427px;top:0;width:427px;height:640px;transform-origin:left center;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.45,.05,.2,1)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#fff}
.face.back{transform:rotateY(180deg)}
.face img.pg{width:100%;height:100%;display:block}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,0) 8%)}
.face.back::after{background:linear-gradient(270deg,rgba(0,0,0,.18),rgba(0,0,0,0) 8%)}
.spot{position:absolute;border-radius:16px;border:3px solid transparent;background:transparent;padding:0;z-index:2}
.hints .spot{border:3px dashed var(--pink);background:rgba(255,95,162,.12);animation:pulse 1.4s infinite}
.spot.found{border:4px solid var(--gold)!important;background:rgba(255,200,61,.22)!important;animation:none!important;box-shadow:0 0 22px rgba(255,200,61,.8)}
.spot.found::after{content:"\2713";position:absolute;right:-13px;top:-13px;width:32px;height:32px;border-radius:50%;background:var(--greeng);border:3px solid #fff;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
@keyframes pulse{50%{background:rgba(255,95,162,.26)}}
.lockface{position:absolute;inset:0;background:linear-gradient(180deg,#f6f8ff,#fdf0fb);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px;text-align:center}
.endpaper{position:absolute;top:0;width:427px;height:640px;background:linear-gradient(160deg,#2b2f9e,#141850);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-weight:800;text-align:center;background-image:radial-gradient(rgba(255,255,255,.10) 1.5px,transparent 2px),linear-gradient(160deg,#2b2f9e,#141850);background-size:22px 22px,100% 100%}
.navb{width:70px;height:70px;border-radius:50%;border:0;background:var(--goldg);color:#4a2c00;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 5px 0 #e08a00,0 10px 22px rgba(255,160,0,.4);transition:transform .1s}
.navb:active{transform:translateY(3px)}
.navb[disabled]{opacity:.3}
.notes{width:262px;flex:none;background:#fff;color:var(--ink);border-radius:26px;padding:16px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 14px 30px rgba(0,0,0,.3)}
.note{border-radius:14px;padding:9px 11px;font-size:14px;line-height:1.4;background:linear-gradient(180deg,#fff8d6,#ffefb0);box-shadow:0 2px 0 #f0d070}
.note.empty{background:#f4f6ff;box-shadow:none;border:2px dashed #cfd5f5;color:#8a90b8}
.note small{display:block;font-weight:800;font-size:11px;color:#8a90b8}
textarea.mynotes{width:100%;min-height:110px;border:2px solid var(--line);border-radius:16px;padding:10px;font:500 15px 'M PLUS Rounded 1c',sans-serif;resize:none;background:#f8f9ff;color:var(--ink);outline:none}
textarea.mynotes:focus{border-color:var(--purple);background:#fff}
/* quiz */
.q{font-weight:800;font-size:17px;margin:0 0 8px;line-height:1.35;color:var(--ink)}
.opts{display:flex;gap:10px}
.opts.col{flex-direction:column}
.opt{flex:1;min-width:0;min-height:56px;border-radius:18px;border:0;background:#fff;color:var(--ink);font-weight:800;font-size:15px;padding:8px 14px;line-height:1.25;text-align:left;box-shadow:inset 0 0 0 2px var(--line),0 3px 0 #d3d8f5;transition:transform .1s,background .2s}
.opt:active{transform:translateY(2px)}
.opt.sel{background:linear-gradient(180deg,#7fdcff,#4cc9f0);color:#06324a;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 #2a9fc4,0 8px 16px rgba(76,201,240,.35)}
.opt.right{background:linear-gradient(180deg,#d9fbe6,#b4f0cc);box-shadow:inset 0 0 0 2px #3ddc84,0 3px 0 #3ddc84}
.opt.wrong{background:linear-gradient(180deg,#ffe2ea,#ffc6d3);box-shadow:inset 0 0 0 2px #ff7aa2,0 3px 0 #ff7aa2}
.opt.dim{opacity:.55}
.sus{flex:1;min-width:0;border-radius:20px;border:0;background:#fff;color:var(--ink);padding:12px;display:flex;align-items:center;gap:12px;text-align:left;font-size:13px;box-shadow:inset 0 0 0 2px var(--line),0 3px 0 #d3d8f5}
.sus.sel{background:linear-gradient(180deg,#7fdcff,#4cc9f0);color:#06324a;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 #2a9fc4,0 8px 16px rgba(76,201,240,.35)}
.av{width:54px;height:54px;flex:none;border-radius:50%;color:#fff;font-family:'Luckiest Guy',cursive;font-size:22px;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.fb{margin-top:8px;font-size:14px;line-height:1.4;font-weight:800}
/* suspects */
.file{flex:1;min-width:0;background:linear-gradient(180deg,#fff8e8,#fff1cf);border-radius:8px 24px 24px 24px;padding:16px;position:relative;display:flex;flex-direction:column;gap:9px;box-shadow:var(--soft)}
.file .tab{position:absolute;top:-30px;left:0;height:30px;padding:0 16px;background:#fff8e8;border-radius:14px 14px 0 0;display:flex;align-items:center;font-weight:800;font-size:12px;color:#a0671a}
.row{background:#fff;border-radius:14px;padding:9px 11px;font-size:14px;line-height:1.4}
.row b{display:block;font-size:11px;color:var(--pink);letter-spacing:.5px}
.chip{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;border:0;font-weight:800;font-size:14px;color:var(--purple);background:#fff;white-space:nowrap;box-shadow:inset 0 0 0 2px var(--line)}
.chip.on{background:var(--indg);color:#fff;box-shadow:0 6px 14px rgba(90,80,240,.3)}
.rbar .chip{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.rbar .chip.on{background:var(--goldg);color:#4a2c00}
/* academy */
.path{position:relative;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:16px 8px}
.node{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;color:var(--ink);font-weight:800;font-size:11px;text-align:center;line-height:1.2}
.node .dot{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Luckiest Guy',cursive;font-size:24px;border:0;background:#fff;box-shadow:inset 0 0 0 3px var(--line),0 4px 0 #d3d8f5;transition:transform .15s}
.node:active .dot{transform:scale(.9)}
.node.done .dot{background:var(--greeng);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 4px 0 #14804a,0 8px 16px rgba(31,164,99,.35)}
.node.cur .dot{background:var(--goldg);color:#4a2c00;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 #e08a00,0 0 0 7px rgba(255,200,61,.35),0 0 26px rgba(255,183,3,.7);animation:bob 1.6s infinite}
.node.lock .dot{background:#eef0fa;color:#a5abd0;box-shadow:inset 0 0 0 3px #e3e6f7}
@keyframes bob{50%{transform:translateY(-5px)}}
.paper{background-color:#fff;background-image:linear-gradient(rgba(123,92,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(123,92,255,.06) 1px,transparent 1px);background-size:24px 24px}
/* overlays and fx */
.ov{position:absolute;inset:0;z-index:50;background:rgba(10,12,50,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{background:linear-gradient(180deg,#ffffff,#f4f2ff);border-radius:32px;padding:30px;max-width:620px;width:90%;display:flex;flex-direction:column;gap:16px;color:var(--ink);box-shadow:0 0 0 4px rgba(255,255,255,.5),0 30px 60px rgba(0,0,0,.4);animation:pop .35s cubic-bezier(.3,1.6,.6,1)}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.zoom{position:absolute;inset:0;z-index:60;background:#070822;overflow:auto}
.zoom img{width:100%;display:block}
.zoom .x{position:sticky;top:14px;float:right;margin:14px}
.float{position:absolute;font-family:'Luckiest Guy',cursive;font-size:46px;color:#ffe36e;-webkit-text-stroke:2px #e05a00;text-shadow:0 0 18px rgba(255,200,61,.9);pointer-events:none;z-index:81;animation:rise 1.2s ease-out forwards}
@keyframes rise{from{transform:translate(-50%,0) scale(.6);opacity:0}20%{opacity:1;transform:translate(-50%,-20px) scale(1.2)}to{transform:translate(-50%,-110px) scale(1);opacity:0}}
.toast{position:absolute;left:50%;top:22px;transform:translateX(-50%);z-index:82;background:var(--greeng);color:#fff;font-weight:800;font-size:18px;padding:12px 26px;border-radius:999px;box-shadow:0 0 0 3px rgba(255,255,255,.6),0 10px 24px rgba(0,0,0,.25);animation:tin .35s cubic-bezier(.3,1.6,.6,1),tout .4s 2.2s forwards}
.toast.bad{background:var(--pinkg)}
@keyframes tin{from{transform:translate(-50%,-80px)}}
@keyframes tout{to{opacity:0;transform:translate(-50%,-40px)}}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.burst{animation:burst .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes burst{40%{transform:scale(1.08)}}
.cert{background:linear-gradient(180deg,#fffef7,#fff6dc);border:8px double #7b5cff;border-radius:14px;padding:34px;text-align:center;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:10px}
.cert .nm{font-family:'Dela Gothic One',sans-serif;font-size:40px;border-bottom:3px solid var(--purple);padding:0 30px 6px}
.tile{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;background:#fff;border:2px solid var(--line);border-radius:24px;padding:18px;color:var(--ink);min-height:150px;box-shadow:var(--soft);transition:transform .12s}
.tile:active{transform:scale(.97)}
.tile .ic{width:54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.tile b{font-size:17px}
.tile span{font-size:14px;color:var(--dim);line-height:1.4}
table.t{width:100%;border-collapse:collapse}
table.t td,table.t th{padding:9px 10px;text-align:left;font-size:14px;border-bottom:1px solid #eceffc;vertical-align:top}
table.t th{font-size:12px;color:var(--dim);letter-spacing:.5px}
input.fld{width:100%;height:58px;border:2px solid var(--line);border-radius:18px;padding:0 18px;font:800 20px 'M PLUS Rounded 1c',sans-serif;color:var(--ink);background:#f8f9ff;outline:none}
input.fld:focus{border-color:var(--purple);background:#fff}
.sparkle{position:absolute;color:#ffd84d;pointer-events:none;animation:twinkle 2.4s infinite}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
/* print */
#print{display:none}
@media print{
  html,body{overflow:visible;background:#fff;height:auto}
  #bg,#device{display:none!important}
  #print{display:block!important;color:#000;font-family:'M PLUS Rounded 1c',sans-serif}
  .pp{page-break-after:always;padding:10mm}
  .pp h1{font-family:'Dela Gothic One',sans-serif;font-size:26pt;margin:0 0 6mm}
  .ln{border-bottom:1px solid #999;height:11mm}
  .box{border:2px solid #000;border-radius:4mm;padding:4mm;margin-bottom:4mm}
}

.cats{display:flex;gap:12px}
.cat{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;font-weight:800;font-size:14px;color:var(--ink);box-shadow:inset 0 -4px 0 var(--c),0 4px 12px rgba(40,50,140,.1)}
.cat .ci{width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center}
.node .dot{position:relative}
.node .cb{position:absolute;right:-4px;top:-4px;width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.node.lock .cb{opacity:.45}
.node .nl{padding-bottom:4px;border-bottom:3px solid var(--c);border-radius:2px}
.node.lock .nl{border-bottom-color:color-mix(in srgb,var(--c) 35%,transparent)}