/* Sunnnnch — a little pixel workbench. */
:root {
  color-scheme: light;
  --bg:#eeedf7; --bg-soft:#e8e5f2; --surface:#fdfcfe; --surface-hi:#f6f3fc; --surface-deep:#e5e0f0;
  --text:#2d2945; --text-soft:#57516c; --muted:#807991; --faint:#8c859e; --line:#e9e5f2; --line-hi:#d7cfe7;
  --accent:#8071b4; --lime:#8071b4; --cyan:#599a86; --orange:#c48154; --mint:#9cdbbb;
  --shadow:0 12px 32px #3023440c; --sidebar:238px;
  --sans:"Segoe UI","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  --mono:"Cascadia Code","SFMono-Regular",Consolas,monospace;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#232133; --bg-soft:#29263b; --surface:#302c43; --surface-hi:#383249; --surface-deep:#252234;
  --text:#f1edf9; --text-soft:#c4bbd7; --muted:#ada2c0; --faint:#a79bb9; --line:#443c56; --line-hi:#655473;
  --accent:#beadee; --lime:#beadee; --cyan:#9ed9c3; --orange:#ecbb90; --shadow:0 12px 32px #0c071c22;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}button{color:inherit}button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}svg{display:block}img{max-width:100%}
[hidden]{display:none!important}
::selection{background:#cfbfea;color:#29243c}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
section[id],h2[id]{scroll-margin-top:70px}
.icon{display:inline-block;width:20px;height:20px;flex:none;vertical-align:-.2em}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;z-index:300;top:12px;left:12px;padding:10px 15px;border-radius:8px;background:var(--surface);transform:translateY(-160%)}
.skip-link:focus{transform:none}
.scroll-progress{position:fixed;z-index:180;inset:0 0 auto;height:2px;pointer-events:none}
.scroll-progress span{display:block;height:100%;background:linear-gradient(90deg,#a6dfc6,#b39ce3);transform:scaleX(var(--scroll-progress,0));transform-origin:left}
.side-nav{position:fixed;z-index:100;inset:0 auto 0 0;width:var(--sidebar);display:flex;flex-direction:column;padding:22px 14px 20px;background:linear-gradient(160deg,#302d46,#252638 85%);color:#e7e1f5;overflow:auto;scrollbar-width:thin;scrollbar-color:#5a516d transparent}
.side-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin:3px 0 30px}
.brand-computer{width:88px;height:76px;image-rendering:pixelated;filter:drop-shadow(5px 7px 0 #17132130);transition:transform .25s}
.side-brand:hover .brand-computer{transform:translateY(-4px) rotate(-3deg)}
.side-brand-copy strong{display:block;margin-top:10px;font:750 25px/1.4 var(--mono);letter-spacing:-.8px;color:#f8f3ff}
.side-brand-copy small{display:block;margin-top:7px;color:#b9adc9;font-size:12px;letter-spacing:.15em}
.command-trigger{display:flex;align-items:center;width:100%;gap:9px;padding:10px 11px;border:1px solid #746983;border-radius:8px;background:#ffffff04;color:#c6bbd7;font-size:11px;white-space:nowrap}
.command-trigger:hover{background:#ffffff0c;border-color:#b6a5ce}
.command-trigger .icon{width:17px;height:17px}
.command-trigger kbd{margin-left:auto;border-radius:4px;background:#ffffff0b;padding:1px 4px;font:10px var(--mono);color:#bdafcf}
.nav-group{margin-top:24px;display:grid;gap:8px}
.nav-group-label{display:none}
.nav-item{display:flex;align-items:center;gap:18px;width:100%;min-height:50px;padding:11px 20px;border:0;border-radius:8px;background:transparent;text-align:left;color:#d4cbe4;font-size:15px;transition:background .2s,color .2s,transform .2s}
.nav-item .icon{width:23px;height:23px;color:#d8cbe8}
.nav-item:hover{background:#b3a1df18;transform:translateX(2px)}
.nav-item.is-active,.nav-item[aria-current="page"]{background:linear-gradient(110deg,#605681,#4d456c);color:#fff;box-shadow:inset 0 1px 0 #c3a8e22a}
.nav-item.is-active .icon,.nav-item[aria-current="page"] .icon{color:#edc5e9;filter:drop-shadow(0 2px 4px #edc5e930)}
.nav-count{margin-left:auto;font:10px var(--mono);color:#b4a6c9}
.side-spacer{flex:1;min-height:34px}
.side-landscape{position:relative;height:118px;min-height:118px;margin:0 -14px;background:url("assets/pixel-night.svg") center bottom / 100% auto no-repeat}
.pixel-star{position:absolute;width:3px;height:11px;background:#d9d0e9}
.pixel-star::after{content:"";position:absolute;width:11px;height:3px;top:4px;left:-4px;background:inherit}
.star-one{left:30px;top:12px}.star-two{left:86px;top:48px;transform:scale(.5)}.star-three{right:36px;top:45px;transform:scale(.5)}
.pixel-moon{position:absolute;right:43px;top:12px;width:17px;height:17px;border-radius:50%;box-shadow:-5px 3px 0 0 #e1d7ed;transform:rotate(-25deg)}
.side-footer{padding:4px 13px 0}
.side-footer p{margin:0 0 20px;color:#c4b8d8;font-family:"KaiTi","STKaiti",var(--sans);font-size:15px;line-height:1.8;letter-spacing:.08em}
.side-footer a{display:flex;align-items:center;gap:9px;color:#b9aacb;font:11px var(--mono)}
.side-footer a:hover{color:#fff}
.side-footer a .icon{width:15px;height:15px}.side-footer a .icon:last-child{margin-left:auto;width:13px;height:13px}
.nav-scrim{display:none}body.nav-open{overflow:hidden}
.workspace{margin-left:var(--sidebar);min-width:0}
.topbar,.site-header{position:sticky;z-index:80;top:0;display:flex;align-items:center;justify-content:space-between;height:51px;gap:20px;padding:0 22px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(15px)}
.breadcrumb{display:flex;align-items:center;gap:12px;color:var(--text-soft);font:10px var(--mono);letter-spacing:.05em;white-space:nowrap}
.welcome-slash{color:var(--accent);font-size:17px;font-weight:700}
.topbar-right{display:flex;align-items:center;gap:14px}
.welcome-replay{padding:0;border:0;background:transparent;color:var(--text-soft);font-size:11px;letter-spacing:.04em}
.welcome-replay:hover{color:var(--accent)}
.window-dots{display:inline-flex;align-items:center;gap:8px}
.window-dots i{width:10px;height:10px;display:block;border-radius:50%;background:#7bcba6}
.window-dots i:nth-child(2){background:#e8bb6c}.window-dots i:nth-child(3){background:#f08b8c}
.theme-toggle,.sidebar-toggle{display:grid;place-items:center;flex:none;width:30px;height:30px;border:0;background:transparent;color:var(--text-soft);border-radius:7px}
.theme-toggle:hover,.sidebar-toggle:hover{background:var(--line)}
.theme-toggle .icon{width:19px;height:19px}
:root[data-theme="dark"] .theme-toggle .sun,:root[data-theme="light"] .theme-toggle .moon{display:none}
.sidebar-toggle{display:none}
.home-main{max-width:1600px;margin:0 auto;padding:0 12px}
.hero{position:relative;isolation:isolate;width:100%;min-width:0;min-height:330px;aspect-ratio:3.48;overflow:hidden;border-radius:12px;border:1px solid #d4cde4;background:#dfdcec;--pointer-x:50%;--pointer-y:50%}
.hero-art{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#e4e0ef80,transparent 48%),radial-gradient(circle at var(--pointer-x) var(--pointer-y),#fff7e91c,transparent 35%);transition:opacity .3s}
.hero-copy{width:47%;padding:clamp(24px,2.35vw,38px) 0 20px clamp(22px,2.6vw,42px);color:#2c2540}
.hero-eyebrow{display:flex;align-items:center;gap:13px;margin:0 0 8px;color:#776388;font:11px var(--mono);letter-spacing:.12em}
.tiny-spark{color:#a481b6;font-size:17px}
.hero h1{margin:0 0 12px;font:800 clamp(40px,4.6vw,76px)/1.16 var(--mono);letter-spacing:-.07em;text-shadow:2px 3px 0 #ffffff30}
.hero-cursor{display:inline-block;font-weight:500;font-size:.7em;color:#867098;animation:cursor-blink 1.2s step-end 4}
.hero-lede{margin:0;color:#4e435e;font-size:clamp(13px,1.25vw,19px);line-height:1.85;font-weight:500}
.hero-handwritten{margin:20px 0 0;transform:rotate(-5deg);transform-origin:left;font-family:"KaiTi","STKaiti",serif;font-size:clamp(16px,1.5vw,23px);line-height:1.5;letter-spacing:.03em}
.hero-handwritten span{position:relative;white-space:nowrap}
.hero-handwritten span::after{content:"";position:absolute;inset:auto -5px -7px -5px;height:8px;border-radius:50%;border-top:4px solid #8bd6ab;transform:rotate(-2deg)}
.hero-sticker{position:absolute;right:125px;bottom:15px;min-width:123px;padding:15px 17px;background:linear-gradient(135deg,#c4eedc,#a9dbc9);color:#3a5550;box-shadow:4px 7px 9px #44315123;transform:rotate(-8deg);font:16px/1.65 "KaiTi","STKaiti",serif;transition:transform .25s}
.hero-sticker span{display:block;text-align:right}.hero-sticker:hover{transform:rotate(-3deg) translateY(-5px)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.43fr) minmax(0,1fr);gap:12px;margin-top:12px;align-items:start}
.dashboard-column{display:flex;min-width:0;flex-direction:column;gap:12px}
.panel{min-width:0;padding:20px;background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:11px;box-shadow:0 2px 4px #39305002}
.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.section-header h2{display:flex;align-items:center;gap:12px;margin:0;font-size:20px;line-height:1.4;font-weight:700;white-space:nowrap}
.heading-icon{width:24px;height:24px}.heading-icon.mint{color:#8bccae}.heading-icon.purple{color:#8b81bf}
.section-label{color:var(--muted);font-size:11px}
.text-link{display:inline-flex;align-items:center;gap:7px;padding:0;background:none;border:0;color:var(--accent);font-size:11px;line-height:1.6}
.text-link .icon{width:15px;height:15px;transition:transform .2s}
.text-link:hover .icon{transform:translateX(3px)}
.text-link:hover{text-decoration:underline;text-underline-offset:3px}
.review-feature{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:225px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.review-cover{position:relative;display:grid;place-items:center;overflow:hidden;background:#b7acb7}
.review-cover::before{content:"";position:absolute;inset:-16px;background:linear-gradient(#8e839b66,#a79ba59c),url("assets/desk-hero-dog.png") 62% 60% / auto 115%;filter:blur(5px);opacity:.75}
.coming-frame{position:relative;display:flex;width:76%;height:72%;align-items:center;justify-content:center;flex-direction:column;border:1px dashed #f4edf477;border-radius:6px;color:#faf4ff}
.coming-frame .icon{width:35px;height:35px;margin-bottom:12px}
.coming-frame span{font-size:20px;letter-spacing:.08em}
.coming-frame small{margin-top:10px;font:7px var(--mono);letter-spacing:.04em;color:#e4dce8}
.review-copy{padding:17px 19px}
.tag{display:inline-flex;align-items:center;width:fit-content;padding:2px 7px;border:1px solid;white-space:nowrap;border-radius:4px;font-size:10px;line-height:1.6}
.tag.purple{color:#8d7bbb;background:#a48ccd0b;border-color:#ae9bcc4a}
.tag.mint{color:#619f88;background:#9fd0ba17;border-color:#94c6ad5c}
.review-copy h3{margin:10px 0 7px;font-size:22px;line-height:1.5}
.review-copy p{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.9}
.coming-badge{display:flex;gap:7px;align-items:center;margin:10px 0;padding:8px 9px;border-radius:5px;background:#e7b97012;color:var(--orange);font-size:11px}
.coming-badge .icon{width:16px;height:16px}
.review-foot{display:flex;gap:7px;align-items:center;margin-top:14px;color:var(--faint);font-size:10px}
.status-dot{width:5px;height:5px;border-radius:50%;background:#a4d2b7;flex:none}
.note-filters{display:flex;gap:6px;padding-bottom:4px;margin-top:-4px}
.note-filters button{border:0;background:transparent;color:var(--muted);border-radius:4px;padding:4px 8px;font-size:10px}
.note-filters button:hover{color:var(--accent)}
.note-filters button.is-active{background:var(--surface-deep);color:var(--accent)}
.notes-grid{display:grid}
.note-row{position:relative;display:flex;align-items:center;gap:12px;min-height:115px;padding:15px 0;border-bottom:1px solid var(--line);transition:transform .2s}
.note-row:hover{transform:translateX(3px)}
.note-row:hover h3{color:var(--accent)}
.note-thumb{position:relative;display:grid;width:101px;min-width:80px;height:76px;flex:none;place-items:center;border:1px solid #ded7e9;border-radius:6px;overflow:hidden}
.thumb-tools{background:linear-gradient(145deg,#ddd3e3,#ede7ec)}
.thumb-tools img{width:63px;transform:rotate(-6deg);filter:drop-shadow(4px 4px 0 #51426917)}
.thumb-data{background:linear-gradient(145deg,#e0ece5,#f6f1e9)}
.thumb-data svg{width:95%;height:90%;transform:rotate(-4deg)}
.thumb-writing{background:linear-gradient(145deg,#e4d5d9,#f0e6e2)}
.mini-paper{position:absolute;width:48px;height:59px;top:10px;left:26px;padding:18px 9px;background:#fffcf7;transform:rotate(-9deg);box-shadow:3px 3px 0 #c5abb666,-4px -3px 0 #eee3e7}
.mini-paper i{display:block;height:2px;background:#c5bdcb;margin-bottom:5px}.mini-paper i:last-child{width:70%}
.mini-pen{position:absolute;left:69px;top:27px;width:6px;height:41px;background:#9a88af;transform:rotate(31deg);border-bottom:7px solid #edd4b2;border-top:4px solid #c7b9d0}
.note-copy{min-width:0;flex:1}
.note-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--faint);font-size:9px}
.note-copy h3{margin:7px 0 0;font-size:14px;line-height:1.7;font-weight:600;transition:color .2s}
.row-arrow{width:14px;height:14px;color:var(--accent)}
.notes-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:18px;color:var(--faint);font-size:10px}
.notes-footer .icon{width:15px;height:15px;color:#aa9fbd}
.filter-empty{padding:25px 6px;color:var(--muted);font-size:12px}
.project-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.project-card{display:flex;flex-direction:column;min-width:0;padding:12px;border:1px solid var(--line);border-radius:7px;background:linear-gradient(145deg,var(--surface),var(--surface-hi));transition:transform .2s,box-shadow .2s,border-color .2s}
.project-card:hover{transform:translateY(-4px);border-color:var(--line-hi);box-shadow:var(--shadow)}
.project-app{display:grid;place-items:center;width:39px;height:39px;border-radius:9px;color:#fff;box-shadow:inset 1px 1px 0 #ffffff61,0 3px 7px #63567614}
.project-app .icon{width:23px;height:23px}
.project-app.mint{background:linear-gradient(135deg,#85c7a9,#63a48c)}
.project-app.lavender{background:linear-gradient(135deg,#c3a6f4,#a18bda)}
.project-app.coral{background:linear-gradient(135deg,#f5b1ae,#e99897)}
.project-card h3{margin:11px 0 5px;font:700 12px/1.5 var(--mono);overflow-wrap:anywhere}
.project-card p{margin:0 0 18px;color:var(--muted);font-size:11px;line-height:1.8}
.project-bottom{display:flex;align-items:center;gap:5px;margin-top:auto;color:var(--faint);font:9px var(--mono)}
.project-bottom .icon{margin-left:auto;width:13px;height:13px;color:var(--accent)}
.language-dot{width:6px;height:6px;border-radius:50%;background:#a19abb;flex:none}
.language-dot.python{background:#86b29c}.language-dot.javascript{background:#ba9bd6}.language-dot.writing{background:#e0a29a}
.more-projects{margin-top:12px;color:var(--muted);font-size:10px}
.more-projects summary{display:flex;justify-content:space-between;gap:10px;list-style:none;cursor:pointer;padding:4px 0}
.more-projects summary::-webkit-details-marker{display:none}
.more-projects[open] summary span{transform:rotate(45deg)}
.more-projects>div{display:grid;margin-top:8px}
.more-projects a{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.more-projects a:hover{color:var(--accent)}
.more-projects strong{font:600 10px var(--mono);color:var(--text-soft)}
.more-projects a .icon{margin-left:auto;width:13px;height:13px}
/* The README window follows the notes naturally in its own column. */
.about-section{min-width:0;overflow:hidden;border:1px solid var(--line-hi);border-radius:10px;background:var(--surface);box-shadow:0 3px 0 color-mix(in srgb,var(--line-hi) 35%,transparent)}
.profile-titlebar{display:flex;align-items:center;gap:11px;padding:10px 15px;border-bottom:1px solid var(--line-hi);background:var(--surface-hi);color:var(--muted);font:10px/1.4 var(--mono)}
.profile-titlebar .window-dots{gap:5px}.profile-titlebar .window-dots i{width:7px;height:7px}.profile-titlebar>.icon{width:13px;height:13px;margin-left:auto;color:var(--faint)}
.profile-titlebar .window-dots i:nth-child(2){background:#b5a0d7}.profile-titlebar .window-dots i:nth-child(3){background:#e8a3ad}
.profile-body{display:grid;grid-template-columns:clamp(76px,7vw,112px) minmax(0,1fr);align-items:center;gap:16px;padding:18px 20px 13px}
.profile-art{aspect-ratio:1;min-width:0}.profile-art img{display:block;width:100%;height:100%;object-fit:contain}
.profile-copy{min-width:0;border-left:1px solid var(--line-hi);padding-left:16px}.profile-copy h2{margin:0;color:var(--text);font:700 clamp(20px,1.65vw,25px)/1.3 var(--mono);letter-spacing:-.035em;white-space:nowrap}
.profile-copy h2 span{display:block;margin-bottom:5px;color:var(--text-soft);font:500 12px/1.5 var(--mono);letter-spacing:0}
.profile-copy p{margin:9px 0 0;color:var(--muted);font-size:11px;line-height:1.8}
.profile-tags{display:flex;flex-wrap:wrap;gap:7px;padding:0 20px 17px}
.profile-tags a{display:inline-flex;align-items:center;min-height:27px;padding:3px 9px;border:1px solid var(--line);border-radius:5px;background:var(--surface-hi);color:var(--text-soft);font-size:10px;line-height:1.6;transition:border-color .2s,color .2s}
.profile-tags a:hover{border-color:var(--accent);color:var(--accent)}
.profile-tags a{gap:5px}.profile-tags .icon{width:12px;height:12px;color:var(--accent)}
.profile-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 20px;border-top:1px solid var(--line);padding:13px 0 15px}
.profile-footer a{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:11px;line-height:1.6}
.profile-footer a:hover span{text-decoration:underline;text-underline-offset:3px}
.profile-footer .icon{width:15px;height:15px}.profile-footer .icon:last-child{width:13px;height:13px;margin-left:auto}
.site-footer,.footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:23px 24px;color:var(--faint);font:9px/1.8 var(--mono)}
.footer-separator{padding:0 10px;color:var(--line-hi)}
.site-footer a:hover,.footer a:hover{color:var(--accent)}
:root[data-theme="dark"] .hero-art{filter:brightness(.78) saturate(.85)}
:root[data-theme="dark"] .hero::after{background:linear-gradient(90deg,#211830c9,transparent 65%)}
:root[data-theme="dark"] .hero-copy,:root[data-theme="dark"] .hero-lede{color:#f3e8fd}
:root[data-theme="dark"] .hero-eyebrow{color:#d0b7e1}
:root[data-theme="dark"] .hero-sticker{filter:brightness(.8)}
:root[data-theme="dark"] .profile-art img{filter:brightness(.9) saturate(.85)}
:root[data-theme="dark"] .tag.purple{color:#c1a7e3}:root[data-theme="dark"] .tag.mint{color:#a0d7bd}
.command-palette{width:min(570px,calc(100% - 30px));max-height:80svh;padding:0;border:1px solid var(--line-hi);border-radius:13px;background:var(--surface);color:var(--text);box-shadow:0 25px 90px #1c112b40}
.command-palette::backdrop{background:#25213666;backdrop-filter:blur(5px)}
.command-head{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--line)}
.command-head .icon{color:var(--accent)}
.command-head input{min-width:0;width:100%;border:0;outline:none;background:transparent;color:var(--text);font-size:14px}
.command-head input::placeholder{color:var(--faint)}
.command-results{max-height:55svh;overflow:auto;padding:8px}
.command-result{display:grid;gap:4px;padding:12px;border-radius:7px}
.command-result:hover,.command-result:focus-visible{background:var(--surface-hi)}
.command-result small{color:var(--accent);font:9px var(--mono)}
.command-result strong{font-size:13px;font-weight:600}
.command-empty{padding:20px 12px;color:var(--muted);font-size:13px}
.command-foot{padding:11px 18px;border-top:1px solid var(--line);color:var(--faint);font:9px var(--mono)}
.boot-overlay{position:fixed;z-index:250;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;background:#ded7eade;backdrop-filter:blur(12px)}
.boot-overlay.is-playing{opacity:1;visibility:visible;pointer-events:auto}
.boot-overlay.is-leaving{opacity:0;visibility:visible;transition:opacity .55s ease}
.boot-inner{width:min(490px,calc(100% - 36px));border:2px solid #8d7b9c;border-radius:10px;background:#f1ebf6;color:#473653;box-shadow:7px 8px 0 #79628335;overflow:hidden}
.boot-titlebar{display:flex;align-items:center;gap:15px;padding:9px 13px;border-bottom:1px solid #a08bab;background:#e1d5eb;color:#7a6688;font:10px var(--mono)}
.boot-titlebar button{margin-left:auto;border:0;background:none;color:#6f567c;font-size:24px;line-height:1}
.boot-titlebar .window-dots{gap:5px}.boot-titlebar .window-dots i{width:8px;height:8px}
.boot-content{padding:30px;text-align:center}
.boot-content>img{image-rendering:pixelated}
.boot-line{margin:20px 0 10px;font:9px var(--mono);letter-spacing:.1em;color:#8b739a}
.boot-content h2{margin:0;font:750 clamp(22px,4vw,30px)/1.4 var(--mono);letter-spacing:-1.5px}
.boot-content h2 span{color:#8c72aa}
.boot-content p:not(.boot-line){color:#927f9e;font-size:12px}
.boot-track{height:9px;margin:24px 16px 7px;border:1px solid #c6b2d0;border-radius:3px;padding:2px}
.boot-progress{display:block;height:100%;background:repeating-linear-gradient(90deg,#b394cb 0 11px,transparent 11px 14px);transform:scaleX(0);transform-origin:left}
.boot-content small{color:#ad99b7;font-size:9px}
.boot-overlay.is-playing .boot-progress{animation:boot-progress 1.5s linear forwards}
.boot-overlay.is-playing .boot-inner{animation:boot-rise .35s ease-out}
/* Existing article markup, re-skinned as part of the observatory. */
.post-page .site-header { margin-left: var(--sidebar); }
.post-page .site-header .nav { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 22px; }
.post-page .site-header .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font: 700 .69rem var(--mono); }
.post-page .site-header .seal { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line-hi); border-radius: 7px; color: var(--lime); font: 700 .91rem var(--sans); }
.post-page .nav-right, .post-page .nav-links { display: flex; align-items: center; gap: 17px; }
.post-page .nav-links a { color: var(--muted); font-size: .75rem; }
.post-page .nav-links a:hover, .post-page .nav-links a[aria-current="page"] { color: var(--lime); }
.post-main { max-width: 1320px; margin-left: var(--sidebar); padding: 56px clamp(24px,4vw,66px) 100px; }
.post-back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 700 .7rem var(--mono); }
.post-back:hover { color: var(--lime); }
.post-back .icon { width: 14px; height: 14px; transform: rotate(180deg); }
.post-header { max-width: 900px; margin: 68px auto 0; }
.post-header .note-meta { display: flex; gap: 15px; color: var(--lime); font: 700 .69rem var(--mono); }
.post-header .note-meta i { width: 18px; height: 1px; margin-top: .65em; background: var(--faint); }
.post-header h1 { margin: 22px 0 25px; font-size: clamp(3rem,5.3vw,6rem); font-weight: 720; line-height: 1.12; letter-spacing: -.07em; }
.post-deck { max-width: 750px; margin: 0; color: var(--text-soft); font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.9; }
.post-header::after { content: ""; display: block; height: 1px; margin-top: 52px; background: var(--line-hi); }
.post-layout { display: grid; grid-template-columns: 175px minmax(0,720px); justify-content: center; gap: clamp(40px,5vw,90px); margin-top: 62px; }
.post-aside { position: sticky; top: 105px; align-self: start; color: var(--muted); font: .69rem var(--mono); }
.post-aside span { display: block; margin-bottom: 13px; color: var(--lime); font-weight: 700; }
.post-aside a { display: block; padding: 9px 0; border-top: 1px solid var(--line); }
.post-aside a:hover { color: var(--lime); }
.post-body { min-width: 0; color: var(--text-soft); font-size: 1.02rem; line-height: 2.05; }
.post-body h2 { margin: 0 0 19px; color: var(--text); font-size: clamp(1.65rem,2.5vw,2.35rem); font-weight: 700; line-height: 1.25; letter-spacing: -.04em; }
.post-body h2:not(:first-child) { margin-top: 68px; }
.post-body p { margin: 0 0 24px; }
.post-body strong { color: var(--text); }
.post-body blockquote { margin: 38px 0; padding: 10px 20px; border-left: 2px solid var(--lime); background: color-mix(in srgb,var(--lime) 5%,transparent); color: var(--text); font-size: 1.15rem; font-weight: 650; }
.post-body a { color: var(--lime); text-decoration: underline; text-underline-offset: 4px; }
.post-next { display: flex; max-width: 900px; justify-content: space-between; gap: 20px; margin: 95px auto 0; padding-top: 25px; border-top: 1px solid var(--line-hi); }
.post-next a { max-width: 48%; font-size: 1.05rem; font-weight: 700; }
.post-next a:hover { color: var(--lime); }
.post-next small { display: block; margin-bottom: 10px; color: var(--faint); font: .65rem var(--mono); }
.post-page .footer { display: flex; justify-content: space-between; gap: 20px; margin-left: var(--sidebar); border-top: 1px solid var(--line); }
.post-page .footer div { display: flex; gap: 18px; }
.mobile-break { display: none; }


/* Article pages share the same calm workbench frame. */
.post-page .site-header{border-bottom:1px solid var(--line)}
.post-page .nav-group[aria-label="文章专题"]{display:none}
.post-main{max-width:1400px;padding:34px clamp(24px,5vw,76px) 70px}
.post-header{margin-top:38px}
.post-header h1{font-size:clamp(30px,4vw,52px);letter-spacing:-.04em}
.post-deck{font-size:16px}
.post-layout{grid-template-columns:150px minmax(0,680px);gap:45px;margin-top:42px}
.post-body{font-size:16px}
.post-body h2{font-size:26px}
.post-body blockquote{border-radius:0 8px 8px 0;font-size:17px}
.post-aside{font-size:11px}
.post-next{margin-top:60px}
@keyframes cursor-blink{50%{opacity:0}}
@keyframes boot-progress{to{transform:scaleX(1)}}
@keyframes boot-rise{from{transform:translateY(12px) scale(.97);opacity:0}to{transform:none;opacity:1}}
@media(min-width:1700px){.hero{min-height:390px}.hero-copy{padding-top:42px}.hero-handwritten{margin-top:40px}.panel{padding:25px}.review-feature{min-height:270px}.note-row{min-height:130px}.project-card{padding:18px}.project-card h3{font-size:13px}.project-card p{font-size:12px}}
@media(max-width:1200px){:root{--sidebar:212px}.side-nav{padding-inline:12px}.side-landscape{margin-inline:-12px}.hero{min-height:305px}.hero-copy{width:52%;padding-top:28px}.hero h1{font-size:49px}.hero-lede{font-size:13px}.hero-handwritten{margin-top:25px;font-size:20px}.hero-sticker{right:18px;bottom:15px;font-size:13px;min-width:105px;padding:11px 14px}.panel{padding:16px}.section-header h2{font-size:16px;gap:8px}.section-header .text-link{font-size:10px}.review-feature{grid-template-columns:.92fr 1fr}.review-copy{padding:13px}.review-copy h3{font-size:17px}.note-thumb{width:79px;height:67px;min-width:0}.note-row{gap:9px}.note-copy h3{font-size:12px}.note-meta>span:not(.tag){display:none}.row-arrow{width:12px}.project-card{padding:9px}.project-card h3{font-size:10px}.project-card p{font-size:9px}.project-bottom{font-size:8px}.post-layout{grid-template-columns:1fr;max-width:720px;margin-inline:auto}.post-aside{display:none}}
@media(max-width:980px){.welcome-replay{display:none}.hero-copy{width:58%;padding-left:24px}.hero-art{object-position:56% center}.hero::after{background:linear-gradient(90deg,#e4e0efbb,transparent 70%)}.dashboard-grid{grid-template-columns:1fr}.dashboard-column{display:contents}.reviews-section{order:1}.notes-section{order:2}.projects-section{order:3}.about-section{order:4}.review-feature{grid-template-columns:1fr 1.3fr;min-height:210px}.review-copy{padding:18px}.review-copy h3 br{display:none}.project-list{grid-template-columns:1fr}.project-card{display:grid;grid-template-columns:36px 1fr;gap:0 10px;padding:10px}.project-app{grid-row:1/3;width:34px;height:34px}.project-app .icon{width:20px;height:20px}.project-card h3{margin:0;font-size:11px}.project-card p{margin:3px 0 0;font-size:10px}.project-card p br{display:none}.project-bottom{grid-column:2;margin-top:7px}.note-row{min-height:120px}.note-thumb{width:70px;height:65px}.note-copy h3 br{display:none}}
@media(max-width:760px){
 :root{--sidebar:0px}
 .side-nav{width:min(270px,85vw);transform:translateX(-101%);transition:transform .25s;box-shadow:var(--shadow);padding:25px 17px 20px}
 body.nav-open .side-nav{transform:none}
 .nav-scrim{position:fixed;z-index:95;inset:0;display:block;background:#211a3470;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;backdrop-filter:blur(3px)}
 body.nav-open .nav-scrim{opacity:1;visibility:visible}
 .sidebar-toggle{display:grid}
 .topbar,.site-header{height:55px;padding:0 14px;gap:10px}
 .breadcrumb{font-size:9px;gap:8px;letter-spacing:0}.welcome-slash{display:none}
 .topbar-right{gap:8px}.topbar-right>.window-dots{gap:5px}.topbar-right>.window-dots i{width:7px;height:7px}
 .home-main{padding:0 10px}
 .hero{min-height:300px;aspect-ratio:2.3}
 .hero-copy{padding-top:29px;width:58%}.hero h1{font-size:clamp(35px,6.5vw,48px)}
 .hero-art{object-fit:cover;object-position:56% center}
 .hero-eyebrow{font-size:9px}.hero-lede{font-size:12px}.hero-handwritten{font-size:18px}
 .hero-sticker{font-size:12px;min-width:92px;right:17px;bottom:18px}
 .dashboard-grid{gap:10px;margin-top:10px}.panel{padding:17px}
 .post-page .site-header,.post-main,.post-page .footer{margin-left:0}
 .post-page .nav-links{display:none}.post-page .nav-right{gap:8px}
 .post-page .site-header .brand{font-size:10px}.post-main{padding:25px 20px 55px}
 .post-header{margin-top:30px}.post-header h1{font-size:34px;line-height:1.3}.post-deck{font-size:14px}
 .post-header::after{margin-top:30px}.post-layout{margin-top:30px}.post-body{font-size:15px}.post-body h2{font-size:23px}
 .post-next a{font-size:13px}.post-next{margin-top:50px}.site-footer,.footer{padding:20px 16px;font-size:8px}
 .mobile-break{display:block}
}
@media(max-width:540px){
 .welcome-label{font-size:8px}.topbar-right>.window-dots{display:none}
 .hero{min-height:405px;aspect-ratio:auto}
 .hero-art{height:70%;top:auto;bottom:0;object-fit:cover;object-position:100% center}
 .hero::after{background:linear-gradient(180deg,#e5dfed 0%,#e5dfed 27%,#e5dfedb3 43%,transparent 72%)}
 .hero-copy{width:100%;padding:22px 22px 0}.hero-eyebrow{margin-bottom:6px}.hero h1{font-size:43px;margin-bottom:8px}.hero-lede{font-size:12px;line-height:1.8}
 .hero-handwritten{display:none}.hero-sticker{font-size:12px;padding:9px 12px;bottom:16px;left:16px;right:auto}
 :root[data-theme="dark"] .hero::after{background:linear-gradient(180deg,#342b41 0%,#342b41 26%,#342b41ad 43%,transparent 72%)}
 .dashboard-grid{grid-template-columns:1fr}
 .review-feature{grid-template-columns:1fr 1.05fr;min-height:235px}.review-copy{padding:14px}.review-copy h3 br{display:block}
 .review-copy h3{font-size:16px}.review-copy p{font-size:10px}.review-copy .text-link{font-size:10px}
 .coming-frame span{font-size:17px}.coming-frame small{font-size:6px}
 .note-row{min-height:107px;gap:14px}.note-thumb{width:100px;height:72px}.note-meta>span:not(.tag){display:inline}.note-copy h3{font-size:13px}.note-copy h3 br{display:block}
 .project-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.project-card{display:flex;padding:10px 8px}
 .project-app{width:34px;height:34px}.project-card h3{font-size:10px;margin-top:10px}.project-card p{font-size:9px;margin:6px 0 13px}.project-card p br{display:block}.project-bottom{font-size:8px;gap:3px;margin-top:auto}
 .project-bottom .icon{width:11px;height:11px}
 .site-footer{flex-wrap:wrap;gap:8px}.footer-separator{padding-inline:5px}
}
@media(max-width:360px){.hero h1{font-size:37px}.hero-copy{padding-left:18px}.welcome-label{font-size:7px}.panel{padding:13px}.note-thumb{width:83px}.section-header h2{font-size:15px}.review-feature{grid-template-columns:.82fr 1fr}.review-copy{padding:12px}.coming-frame small{display:none}.project-card{padding:9px 6px}.project-bottom .language-dot{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.boot-overlay{display:none!important}}