:root{--desk:#ecebe6;--grid:rgba(0,0,0,.05);--body:#f4efe4;--ink:#2b2824;--muted:#8a847a;--paper:#fffdf7}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--desk);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;color:var(--ink);font:15px/1.8 "Songti SC","Noto Serif SC","SimSun",serif}
a{color:inherit}
.stage{max-width:760px;margin:0 auto;padding:40px 16px 80px}
.printer{position:relative;z-index:2;background:var(--body);border-radius:28px 28px 14px 14px;padding:24px 28px 34px;box-shadow:inset 0 2px 0 #fff,inset 0 -6px 0 #e2dccf,0 18px 40px rgba(60,50,30,.15)}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px;border-radius:50%;background:#2b2824;color:#f4efe4;display:grid;place-items:center;font-weight:700}
.name{font:700 14px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.2em}
.sub{font-size:12px;color:var(--muted)}
.keys{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.key{min-width:64px;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:#ede6d6;text-decoration:none;font-size:14px;box-shadow:inset 0 1px 0 #fff,0 4px 0 #cfc5b0,0 6px 10px rgba(0,0,0,.08)}
.key.on{transform:translateY(3px);box-shadow:inset 0 1px 0 #fff,0 1px 0 #cfc5b0,0 2px 4px rgba(0,0,0,.08)}
.slot{position:absolute;left:5%;right:5%;bottom:10px;height:6px;border-radius:3px;background:#3a342c;box-shadow:inset 0 2px 3px #000}
.paper{position:relative;z-index:1;width:88%;margin:-10px auto 0;background:var(--paper);padding:40px 36px 48px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 16px 30px rgba(60,50,30,.12)}
.paper h1{margin:0;font-size:26px}
.desc{margin:4px 0 16px;color:var(--muted)}
.item{display:block;padding:18px 0;border-top:1px dashed #ddd6c8;text-decoration:none}
.item h2{margin:0;font-size:18px}
.item p{margin:4px 0 0;color:var(--muted);font-size:13px}
@media(max-width:600px){.printer{padding:20px 20px 30px}.paper{width:92%;padding:28px 20px}.key{min-width:0;flex:1;padding:0 8px}}
body{overflow-x:hidden}
.key{transition:transform .12s,box-shadow .12s}
.key:active{transform:translateY(4px);box-shadow:inset 0 1px 0 #fff,0 0 0 #cfc5b0}
.paper.print{animation:print 1.4s linear both}
.paper.drop{animation:drop .65s ease-in forwards}
@keyframes print{from{transform:translateY(-100%);clip-path:inset(100% 0 0 0)}to{transform:none;clip-path:inset(0)}}
@keyframes drop{to{transform:translateY(110vh) rotate(6deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.paper.print,.paper.drop{animation:none}}
html{scrollbar-gutter:stable}
:root[data-theme="dark"]{--desk:#1c1b19;--grid:rgba(255,255,255,.04);--muted:#9a9388}
body{transition:background-color .6s}
body::before{content:"";position:fixed;left:50%;top:-35vh;width:130vw;height:95vh;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,210,130,.55),rgba(255,210,130,0));pointer-events:none;z-index:-1;animation:glow 7s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;background:radial-gradient(60% 45% at 50% 0,rgba(255,200,110,.35),transparent 70%);mix-blend-mode:soft-light;pointer-events:none;z-index:5}
:root[data-theme="dark"] body::before{background:radial-gradient(closest-side,rgba(150,170,210,.1),transparent)}
:root[data-theme="dark"] body::after{opacity:0}
@keyframes glow{to{opacity:.8}}
.printer,.paper{transition:filter .6s}
:root[data-theme="dark"] .printer,:root[data-theme="dark"] .paper{filter:brightness(.78) saturate(.9)}
.paper{color:#2f2a25;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.paper h1,.paper h2,.paper p,.paper li{text-shadow:0 0 1px rgba(47,42,37,.28),.3px .2px 0 rgba(47,42,37,.12)}
.lamp{position:fixed;top:0;right:max(16px,6vw);z-index:20;width:44px;height:calc(150px + var(--pull,0px));padding:0;border:0;background:none;cursor:grab;touch-action:none;transition:height .5s cubic-bezier(.3,1.8,.5,1)}
.lamp.hold{transition:none;cursor:grabbing}
.lamp:focus-visible{outline:2px solid #c9a15b;outline-offset:4px}
.cord{position:absolute;left:21px;top:0;bottom:22px;width:2px;background:#6b645a}
.knob{position:absolute;left:14px;bottom:0;width:16px;height:24px;border-radius:8px 8px 10px 10px;background:linear-gradient(#f6f0e2,#d9cfba);box-shadow:0 3px 6px rgba(0,0,0,.2)}
:root[data-theme="dark"] .cord{background:#a39a8c}
.lamp.tug{animation:tug .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes tug{40%{height:185px}}
@media(prefers-reduced-motion:reduce){body::before,.lamp.tug{animation:none}.lamp{transition:none}}
.tag{margin:28px 0 8px;font:12px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.2em;color:var(--muted)}
.word{padding:18px 0;border-top:1px dashed #ddd6c8;border-bottom:1px dashed #ddd6c8}
.word .tag{margin-top:0}
.word p{margin:2px 0}
.word .en{font:700 34px/1.2 Georgia,"Times New Roman",serif;letter-spacing:.06em}
.word .zh{color:var(--muted)}
.row{display:flex;gap:14px;align-items:center}
.thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;flex:none}
.plog img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}
.body img{max-width:100%;height:auto}
.pnav{display:flex;justify-content:space-between;margin-top:40px;padding-top:16px;border-top:1px dashed #ddd6c8;font-size:14px}
.pnav a{text-decoration:none}
.off{color:#c9c2b4}
.word:first-child{border-top:0;padding-top:0}
.rope{position:fixed;top:0;right:max(0px,calc(6vw - 138px));width:320px;height:480px;z-index:20;pointer-events:none}
.rope-btn{position:fixed;top:0;right:0;width:1px;height:1px;opacity:0;overflow:hidden}
.rope-btn:focus-visible{width:auto;height:auto;opacity:1;padding:6px 10px;background:#f4efe4;border:1px solid #c9a15b;border-radius:6px}
.mute{position:absolute;top:18px;right:20px;width:52px;height:44px;border:0;background:none;padding:0;cursor:pointer;color:var(--muted)}
.mute i{display:block;position:relative;width:30px;height:14px;margin:6px auto 4px;border-radius:7px;background:#d9cfba;box-shadow:inset 0 1px 3px rgba(0,0,0,.25);transition:background .2s}
.mute i::after{content:"";position:absolute;top:-3px;left:-2px;width:20px;height:20px;border-radius:50%;background:linear-gradient(#fff,#e6dcc8);box-shadow:0 2px 3px rgba(0,0,0,.2);transition:left .15s}
.mute.on i{background:#e0a45a}
.mute.on i::after{left:12px}
.mute b{display:block;font:9px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.15em}
.paper{display:flex;flex-direction:column;min-height:calc(100svh - 300px)}
.pnav,.pager{margin-top:auto;padding-top:24px}
.paper>*{min-width:0;width:100%}
.body{overflow-wrap:break-word;word-break:break-word}
.body pre{overflow-x:auto}
.paper h1,.paper h2,.paper h3{font-family:inherit;font-weight:700;line-height:1.45;margin:0 0 12px}
.paper h1{font-size:26px}
.paper h2{font-size:20px}
.paper h3{font-size:17px}
.paper .body,.paper p,.paper li{font-family:inherit;font-size:15px;line-height:1.8}
.item h2{font-size:20px;margin-bottom:4px}
.key.tamp{animation:tamp .2s}
@keyframes tamp{50%{transform:translateY(5px)}}
.thumb.big{width:96px;height:96px;border-radius:8px}
.icp{margin-top:28px;text-align:center;font-size:11px;color:var(--muted)}
.icp a{color:var(--muted)}
.icp{margin:18px 0 24px}
.logo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.brand .name{letter-spacing:1px}
.brand .name{letter-spacing:0px}
.brand .name{letter-spacing:-1px}
.brand .logo{overflow:hidden}
.brand .logo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.brand .logo{width:64px;height:64px;flex:none;overflow:hidden}
.brand .logo img{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block}
.brand .name{letter-spacing:0px}