@font-face{font-family:Instrument Serif;src:url('assets/InstrumentSerif-Regular.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;--paper:#faf9f6;--ink:#292a28;--muted:#85857e;--line:rgba(42,41,35,.10);--amber:#ae8651;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button,a,textarea{-webkit-tap-highlight-color:transparent}button,textarea{font:inherit}button{color:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:5px}button:disabled{cursor:default}[hidden]{display:none!important}
.spread{display:grid;grid-template-columns:1fr 1fr;height:100svh;height:100dvh;min-height:0;overflow:hidden}
.studio{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:44px clamp(24px,4.5vw,72px);background:radial-gradient(ellipse at 20% 90%,rgba(206,166,113,.13),transparent 55%),linear-gradient(145deg,#eeece7,#e4e2de);border-right:1px solid var(--line)}
.studio-caption{align-self:flex-start;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.035em;color:#89877f;margin:0 0 20px 5px}.little-line{width:18px;height:1px;background:#a4937a}
.app-window{width:100%;max-width:660px;height:min(650px,74dvh);display:flex;flex-direction:column;overflow:hidden;background:rgba(255,255,255,.91);border:1px solid rgba(255,255,255,.9);border-radius:12px;box-shadow:0 34px 70px -28px rgba(51,45,34,.25),0 3px 10px rgba(51,45,34,.04);animation:window-arrive .85s cubic-bezier(.2,.7,.25,1) both}
.titlebar{height:52px;min-height:52px;display:flex;align-items:center;position:relative;padding:0 14px;gap:12px}.traffic-lights{display:flex;gap:7px;position:absolute;left:15px}.traffic-lights span{height:10px;width:10px;border-radius:50%;background:#ff6057;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}.traffic-lights span:nth-child(2){background:#ffbd2e}.traffic-lights span:nth-child(3){background:#28c840}.window-title{font-size:12px;font-weight:550;margin:auto;max-width:50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.edit-button{position:absolute;right:12px;display:flex;gap:7px;align-items:center;font-size:11px;border:0;border-radius:5px;background:none;padding:6px}.edit-button:hover{background:rgba(0,0,0,.035)}kbd{font-family:inherit;font-size:10px;color:#868681;padding:3px 4px;background:rgba(0,0,0,.035);border-radius:4px}
.tabs{display:flex;padding:0 11px 8px;gap:5px}.tab{min-width:0;flex:1;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;padding:8px 8px;border:1px solid transparent;border-radius:6px;background:rgba(0,0,0,.025);color:#888881}.tab.active{color:#454540;background:rgba(255,255,255,.95);border-color:rgba(0,0,0,.075)}.tab:hover{color:#454540}.file-symbol{font-size:11px;color:#93938b}
.document-surface{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(72,70,60,.18) transparent;overscroll-behavior:contain}.document{position:relative;padding:clamp(22px,3vw,44px) clamp(24px,3.5vw,52px) 28px;font-size:clamp(12px,1.04vw,15px);line-height:1.75;overflow-wrap:anywhere}.document h1{font-size:clamp(25px,2.7vw,38px);letter-spacing:-.045em;line-height:1.18;font-weight:650;margin:0 0 22px}.document h2{font-size:1.16em;letter-spacing:-.02em;margin:2em 0 .7em}.document p{margin:0 0 1.25em}.document ul{padding-left:1.25em;margin:.8em 0 1.4em}.document li{padding-left:.12em;margin:.25em 0}.document li::marker{color:#a4a49c}.document blockquote{margin:1.6em 0;padding:12px 16px;background:rgba(80,130,175,.045);border:1px solid rgba(80,110,140,.08);border-radius:6px;color:#777c7b}.document blockquote p{margin:0}.document code{font: .88em ui-monospace,SFMono-Regular,Menlo,monospace;background:#f0f2f2;border:1px solid #e7e9e9;border-radius:4px;padding:.1em .25em}.document pre{overflow:auto;padding:14px;background:#f5f5f2;border-radius:7px}.document pre code{padding:0;border:0;background:transparent}.document hr{border:0;border-top:1px solid var(--line);margin:1.8em 0}.document a{color:#527a95}.closing-note{color:#9c9c93;font-size:.88em}.editor{display:block;resize:none;width:100%;min-height:100%;border:0;outline:none;background:transparent;color:#50514c;padding:28px clamp(24px,3.5vw,52px);font:12px/1.85 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2}.window-status{display:flex;justify-content:space-between;gap:12px;padding:9px 15px;font-size:9px;color:#a1a199;border-top:1px solid rgba(0,0,0,.035)}.window-hint{color:#b0b0a7}.try-note{font-size:11px;color:#918e85;margin:24px 0 0;text-align:center}.try-note button{padding:0;border:0;background:none;color:#706a5f;border-bottom:1px solid #c6c0b5;margin-left:3px;font-size:inherit}
.introduction{position:relative;display:flex;align-items:center;justify-content:center;padding:48px 36px 90px}.identity{width:100%;max-width:420px;animation:identity-arrive .9s ease .12s both}.app-icon{display:block;width:clamp(100px,11vw,152px);height:auto;margin:0 0 26px;filter:drop-shadow(0 12px 16px rgba(60,48,24,.09));animation:icon-arrive 1.1s cubic-bezier(.2,.7,.25,1) both}.identity h1{font-family:Instrument Serif,Georgia,serif;font-size:clamp(56px,6vw,84px);font-weight:400;line-height:1.03;letter-spacing:-.04em;margin:0 0 20px}.name-period{color:var(--amber)}.subtitle{font-size:clamp(16px,1.55vw,21px);letter-spacing:-.02em;margin:0 0 14px}.description{font-size:14px;line-height:1.85;color:#929087;margin:0 0 38px}.download{display:inline-flex;align-items:center;gap:16px;border-radius:12px;padding:4px 7px 4px 0;transition:transform .18s ease}.download-symbol{display:grid;place-items:center;width:54px;height:54px;border:1px solid #dedbd3;border-radius:14px;background:linear-gradient(#fff,#f2f0ea);box-shadow:0 2px 3px rgba(0,0,0,.02);transition:border-color .18s,box-shadow .18s}.download-symbol svg{width:23px;height:23px}.download-copy{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:550}.download-copy small{font-weight:400;font-size:11px;color:#928d80}.download:hover .download-symbol{border-color:#b6a78d;box-shadow:0 4px 14px rgba(94,72,33,.08)}.download:hover{transform:translateY(-2px)}.requirements{font-size:10px;color:#aaa598;margin:16px 0 0;line-height:1.6}.requirements>span{margin:0 4px}.maker{position:absolute;bottom:28px;left:36px;right:36px;display:flex;justify-content:space-between;gap:15px;color:#aaa69b;font-size:10px;letter-spacing:.01em}.maker a{color:#80796c}.maker a:hover{text-decoration:underline;text-underline-offset:3px}
@keyframes window-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes identity-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes icon-arrive{from{opacity:0;transform:scale(.95) translateY(6px)}to{opacity:1;transform:none}}
@media(min-width:760px) and (max-height:700px){.studio{padding-top:25px;padding-bottom:25px}.studio-caption{margin-bottom:12px}.app-window{height:74dvh}.try-note{margin-top:14px}.app-icon{width:94px;margin-bottom:18px}.identity h1{font-size:60px;margin-bottom:14px}.description{margin-bottom:22px}.introduction{padding-bottom:65px}.maker{bottom:18px}}
@media(max-width:759px){.spread{grid-template-columns:1fr;grid-template-rows:46% 54%}.studio{padding:16px 26px 12px;border-right:0;border-bottom:1px solid var(--line)}.studio-caption,.try-note,.window-status{display:none}.app-window{height:100%;max-width:520px}.titlebar{height:38px;min-height:38px}.tabs{padding-bottom:5px}.tab{font-size:9px;padding:6px}.document{padding:20px 26px;font-size:12px}.document h1{font-size:27px}.introduction{padding:20px 28px 48px;text-align:center}.identity{max-width:400px}.app-icon{width:64px;margin:0 auto 10px;filter:drop-shadow(0 5px 8px rgba(60,48,24,.08))}.identity h1{font-size:43px;margin-bottom:9px}.subtitle{font-size:15px;margin-bottom:9px}.description{font-size:11px;line-height:1.6;margin-bottom:14px}.download{text-align:left;gap:12px}.download-symbol{height:40px;width:40px;border-radius:11px}.download-symbol svg{width:20px;height:20px}.download-copy{font-size:12px;gap:3px}.download-copy small{font-size:10px}.requirements{font-size:9px;margin:8px 0 0}.maker{font-size:8px;left:25px;right:25px;bottom:15px}}
@media(max-height:590px) and (max-width:759px){.spread{grid-template-rows:42% 58%}.app-icon{width:45px;margin-bottom:5px}.identity h1{font-size:32px}.description{display:none}.subtitle{font-size:12px}.introduction{padding-top:10px;padding-bottom:35px}.maker{bottom:9px}}
@media(max-height:360px){.spread{height:auto;min-height:100dvh;overflow:visible}.studio{min-height:260px}.introduction{min-height:340px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The demo follows the production reader's default typography and block styles. */
.app-window{background:#fff;border:1px solid rgba(0,0,0,.075);border-radius:12px}
.titlebar{height:52px;min-height:52px;background:transparent}
.traffic-lights span{width:12px;height:12px}.traffic-lights{gap:8px}
.window-title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#272729}
.window-title::before{content:'';width:11px;height:14px;background:currentColor;opacity:.5;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M2 1h5l3 3v11H2zM7 1v4h3M4 8h4M4 11h4' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.edit-button{font-size:12px;font-weight:500;right:14px}.edit-button kbd{font-size:11px}
.document-surface{container-type:inline-size}
.document{--ink:#272729;--secondary:#737378;--line:rgba(0,0,0,.10);--surface:rgba(0,0,0,.027);--accent:#0877db;--code:rgba(29,112,184,.08);--quote:rgba(35,125,210,.055);position:relative;width:calc(100% - 104px);max-width:740px;margin:0 auto;padding:42px 0 64px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.65;font-weight:400;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
.document>:first-child{margin-top:0}

.editor{font:14px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;padding:42px 24px;color:#272729}
@container(max-width:600px){.document{width:calc(100% - 48px);padding:28px 0 48px}}

/* Minimal app identity. */
.identity .subtitle{margin-bottom:34px;line-height:1.5}.identity .subtitle strong{font-weight:500}
@media(max-width:759px){.identity .subtitle{margin-bottom:20px}}

/* Wallpaper sits beneath the simulated ultra-thick window material. */
.studio{background:#b9b1a3 url('assets/wallpaper.jpg') center/cover no-repeat}
.app-window{background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(44px) saturate(1.15);backdrop-filter:blur(44px) saturate(1.15);border:1px solid rgba(255,255,255,.65);box-shadow:0 30px 70px -20px rgba(25,22,20,.32),0 2px 8px rgba(25,22,20,.1)}

/* Center the identity and download group within the right half. */
.introduction{padding:48px 36px;text-align:center}
.identity .app-icon{margin-left:auto;margin-right:auto}
.identity .download{text-align:left}
@media(max-width:759px){.introduction{padding:20px 28px}}
@media(max-height:590px) and (max-width:759px){.introduction{padding:10px 28px}}

/* Native header geometry from DocumentView: 52px bar, 13px title,
   31px Edit/View control with the app's keyboard badge dimensions. */
.titlebar{flex-shrink:0;padding:0 14px}
.window-title{position:absolute;left:50%;transform:translateX(-50%);margin:0;gap:5.5px;font-weight:600;letter-spacing:0;max-width:calc(100% - 220px);height:26px}
.window-title::before{flex-shrink:0;width:11.5px;height:14px;opacity:1;background:#737378}
.edit-button{height:31px;padding:0 7.5px;gap:5px;border-radius:6.5px;color:#272729}
.edit-button kbd{font-size:11px;font-weight:500;letter-spacing:.4px;line-height:14px;padding:2px 5.5px;border-radius:4.5px;color:rgba(0,0,0,.75);background:rgba(0,0,0,.055);border:.5px solid rgba(0,0,0,.09)}
.traffic-lights{left:16px;gap:8px}
.traffic-lights span{box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14),inset 0 1px 1px rgba(255,255,255,.35),0 .5px 1px rgba(0,0,0,.08)}
.document blockquote{color:inherit}
.document blockquote p{margin:0 0 1.05em}
.document code{font-weight:inherit;line-height:inherit}
.document hr{border-top:0}
.document table{text-align:left}
.document-surface{scrollbar-color:rgba(0,0,0,.28) transparent}
.editor{width:calc(100% - 48px);margin:0 auto;padding:28px 0 48px;font-size:16px;line-height:1.65}
@container(min-width:601px){.editor{width:calc(100% - 104px);max-width:740px;padding:42px 0 64px}}

/* Clean Apple light appearance and compact, softly raised download CTA. */
:root{--paper:#fff}
.introduction{background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}
.name-period{color:#EDE19A}
.identity .subtitle{font-size:clamp(16px,1.55vw,21px);letter-spacing:-.025em;color:#38383a}
.identity .subtitle strong{font-weight:500}
.download{position:relative;display:inline-flex;justify-content:center;align-items:center;height:40px;gap:9px;padding:0 18px;border-radius:6px;font-size:13px;font-weight:500;background:#fff;color:#272729;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.06);transition:background .2s,box-shadow .2s}
.download::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(rgba(255,255,255,.12),transparent)}
.download:hover{transform:none;background:#f5f5f5;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(0,0,0,.16),0 2px 5px rgba(0,0,0,.08)}
.download:active{background:#ededed;box-shadow:inset 0 1px 2px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.12)}
.download-glyph{width:16px;height:16px;flex-shrink:0}
.free-note{font-size:11px;color:#86868b;margin:16px 0 0}
.window-title{padding:0 8px;border-radius:6px;transition:background .18s}
.window-title:hover{background:rgba(0,0,0,.055)}
.window-title::after{content:'';width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:2px;opacity:0;transition:opacity .18s}
.window-title:hover::after{opacity:.85}
.edit-button{border-radius:6.5px;line-height:normal}
.edit-button:hover{background:rgba(0,0,0,.055)}
/* Glass window controls: colored body, luminous rim, lower reflected light. */
.traffic-lights span{position:relative;background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.52),transparent 55%),linear-gradient(to bottom,#f44d44,#ff7067);border:.5px solid rgba(136,26,17,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.72),inset 0 -1px 1px rgba(255,255,255,.40),0 .5px 1px rgba(0,0,0,.13)}
.traffic-lights span:nth-child(2){background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.58),transparent 55%),linear-gradient(#f5b21b,#ffcf45);border-color:rgba(151,103,8,.28)}
.traffic-lights span:nth-child(3){background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.52),transparent 55%),linear-gradient(#20b636,#42d95b);border-color:rgba(11,114,28,.28)}
.traffic-lights span::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(to bottom,rgba(255,255,255,.30),transparent 45%,rgba(255,255,255,.08));pointer-events:none}
.traffic-lights:hover span:first-child::before{content:'×';position:absolute;inset:-2px 0 0;text-align:center;font:12px/12px -apple-system,sans-serif;color:rgba(90,15,8,.8)}
.traffic-lights:hover span:nth-child(2)::before{content:'';position:absolute;left:2px;right:2px;top:5px;height:1px;background:rgba(112,74,0,.8)}
.traffic-lights:hover span:nth-child(3)::before{content:'↗';position:absolute;inset:-1px 0 0;text-align:center;font:10px/12px -apple-system,sans-serif;color:rgba(4,77,15,.8)}

/* Warm gold CTA with Meteorite's Apple silhouette and layered finish. */
.download{height:42px;padding:0 20px;gap:9px;border-radius:8px;background:linear-gradient(180deg,#f4eab4 0%,#EDE19A 100%);color:#40391f;font-size:13px;font-weight:600;letter-spacing:-.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(139,109,27,.12),0 0 0 1px rgba(139,109,27,.23),0 3px 7px rgba(126,100,32,.12);transition:background .18s,box-shadow .18s}
.download::after{background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 60%)}
.download:hover{background:linear-gradient(180deg,#f7efc4,#efe4a6);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(139,109,27,.10),0 0 0 1px rgba(139,109,27,.28),0 4px 10px rgba(126,100,32,.15)}
.download:active{background:linear-gradient(180deg,#e8d990,#eddfa0);box-shadow:inset 0 1px 3px rgba(126,100,32,.13),0 0 0 1px rgba(139,109,27,.25),0 1px 2px rgba(126,100,32,.08)}
.download-apple{display:block;width:17px;height:17px;opacity:.78;flex-shrink:0;margin-top:-1px}

/* Larger window controls tucked into the upper-left corner. */
.traffic-lights{left:10px;top:10px;gap:8px}
.traffic-lights span{width:14px;height:14px}
.traffic-lights:hover span:first-child::before{inset:-1px 0 0;font-size:13px;line-height:14px}
.traffic-lights:hover span:nth-child(2)::before{left:3px;right:3px;top:6px}
.traffic-lights:hover span:nth-child(3)::before{inset:0;font-size:11px;line-height:14px}

/* Equal clearance around the 31px control inside the 52px header. */
.edit-button{right:10.5px;cursor:default}

/* Pure white beneath the Lightmark identity and download area. */
body,.introduction,.identity{background-color:#FFFFFF}

/* The 19px badge has exactly 6px clearance on every side in a 31px control. */
.edit-button{top:10.5px;right:10.5px;height:31px;padding:6px;align-items:center;line-height:14px}
.edit-button kbd{box-sizing:border-box;height:19px;line-height:14px;padding:2px 5.5px;border-width:.5px;flex-shrink:0}
.identity .subtitle code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;font-weight:650;letter-spacing:-.025em;padding:.10em .25em;background:rgba(29,112,184,.08);border:1px solid rgba(0,0,0,.10);border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.project-signature{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;color:rgba(115,115,120,.65)}
.project-signature>span:first-child{font-size:7.5px;font-weight:600;letter-spacing:1px;color:rgba(115,115,120,.4)}
.signature-name{font-family:Baunk,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14.5px;padding:6.5px;border: .5px solid transparent;border-radius:7px;transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.project-signature:hover .signature-name{color:#8e41e6;background:rgba(168,85,247,.03);border-color:rgba(216,160,255,.14);text-shadow:0 0 3px rgba(216,160,255,.12)}
@media(max-width:759px){.project-signature{bottom:10px}.signature-name{font-size:12px;padding:4px}.project-signature{gap:2px}}
@media(max-height:590px) and (max-width:759px){.project-signature{position:static;transform:none;margin-top:14px}.introduction{flex-direction:column}}

/* Eight pixels around the 19px keyboard badge; keep outer clearance equal. */
.edit-button{top:8.5px;right:8.5px;height:35px;padding:8px}
.identity .subtitle code{font-weight:400}
.download{background:linear-gradient(180deg,#29292b,#1d1d1f);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 0 1px rgba(0,0,0,.85),0 3px 7px rgba(0,0,0,.14)}
.download:hover{background:linear-gradient(180deg,#3b3b3d,#29292b);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(0,0,0,.85),0 4px 10px rgba(0,0,0,.18)}
.download:active{background:#171719;box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.1)}
.download-apple{filter:invert(1);opacity:1}

.window-title{cursor:default;user-select:none;-webkit-user-select:none}
/* Bold geometric hover symbols matching the supplied window-control reference. */
.traffic-lights:hover span::before{content:'';position:absolute;inset:3px;background:currentColor;line-height:normal;font-size:0}
.traffic-lights:hover span:first-child::before{inset:3px;color:#9e241b;clip-path:polygon(16% 0,50% 34%,84% 0,100% 16%,66% 50%,100% 84%,84% 100%,50% 66%,16% 100%,0 84%,34% 50%,0 16%)}
.traffic-lights:hover span:nth-child(2)::before{left:3px;right:3px;top:6px;bottom:auto;height:2px;border-radius:1px;background:#a87509}
.traffic-lights:hover span:nth-child(3)::before{inset:4px;color:#238a20;clip-path:polygon(0 0,85% 0,0 85%,0 0,100% 15%,100% 100%,15% 100%,100% 15%)}
.traffic-lights:hover span:nth-child(3)::before{clip-path:none;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0h7L0 7zM8 1v7H1z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Native-style continuous window corners, with a rounded fallback. */
.app-window{border-radius:16px;isolation:isolate}
@supports(corner-shape:squircle){
  .app-window{border-radius:20px;corner-shape:squircle}
}

/* Curve, rim, and shadow share one pixel-sized continuous contour. */
.window-shell{position:relative;width:100%;max-width:660px;height:min(650px,74dvh);filter:drop-shadow(0 1px 2px rgba(0,0,0,.18)) drop-shadow(0 10px 18px rgba(0,0,0,.18)) drop-shadow(0 24px 38px rgba(0,0,0,.14))}
.window-shell .app-window{width:100%;height:100%;max-width:none;border:0;border-radius:0;box-shadow:none;animation:none}
.window-rim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.window-rim path{fill:none;stroke-width:1}
.window-edge{stroke:rgba(0,0,0,.25)}
.window-highlight{stroke:rgba(255,255,255,.55)}
@media(max-width:759px){.window-shell{height:100%;max-width:520px}}

/* Keep the backdrop sampling unobstructed: an ancestor filter isolates it
   from the wallpaper and makes the material appear flat/opaque. */
.window-shell{filter:none;isolation:isolate}
.window-shell::before{content:'';position:absolute;inset:0;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.18),0 10px 24px rgba(0,0,0,.2),0 26px 48px rgba(0,0,0,.16);pointer-events:none;z-index:-1}
.window-shell .app-window{position:relative;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(44px) saturate(1.15);backdrop-filter:blur(44px) saturate(1.15)}
.window-rim{z-index:1}

/* Follow the computer's appearance, including changes while the page is open. */
@media(prefers-color-scheme:dark){
  :root{color-scheme:dark;--paper:#1d1d1f;--ink:#e2e2e5;--muted:#a1a1a8;--line:rgba(255,255,255,.12)}
  body,.introduction,.identity{background-color:#1d1d1f;color:#e2e2e5}
  .identity .subtitle{color:#d1d1d6}
  .free-note{color:#a1a1a8}
  .window-shell .app-window{background:rgba(30,30,32,.86);-webkit-backdrop-filter:blur(44px) saturate(1.15);backdrop-filter:blur(44px) saturate(1.15)}
  .window-edge{stroke:rgba(0,0,0,.65)}
  .window-highlight{stroke:rgba(255,255,255,.18)}
  .window-title,.edit-button{color:#e2e2e5}
  .window-title::before{background:#a1a1a8}
  .window-title:hover,.edit-button:hover{background:rgba(255,255,255,.08)}
  .edit-button kbd{color:rgba(255,255,255,.75);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
  .document{--ink:#e2e2e5;--secondary:#a1a1a8;--line:rgba(255,255,255,.12);--surface:rgba(255,255,255,.035);--accent:#80b9f0;--code:rgba(126,186,241,.10);--quote:rgba(93,165,233,.08);color:var(--ink)}
  .editor{color:#e2e2e5}
  .document-surface{scrollbar-color:rgba(255,255,255,.3) transparent}
  .download{background:linear-gradient(180deg,#333336,#252528);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 0 1px rgba(255,255,255,.16),0 3px 7px rgba(0,0,0,.25)}
  .download:hover{background:linear-gradient(180deg,#414145,#333336);box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 0 0 1px rgba(255,255,255,.24),0 4px 10px rgba(0,0,0,.3)}
  .download:active{background:#222225;box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.16)}
  .project-signature{color:rgba(161,161,168,.65)}
  .project-signature>span:first-child{color:rgba(161,161,168,.4)}
  .project-signature:hover .signature-name{color:#e2c8ff;background:rgba(168,85,247,.05);border-color:rgba(216,160,255,.2);text-shadow:0 0 3px rgba(216,160,255,.22)}
}

/* Dark ultra-thick material: a softened backdrop with a translucent charcoal
   tint, rather than the nearly opaque neutral gray used previously. */
@media(prefers-color-scheme:dark){
  .window-shell .app-window{background:rgba(39,32,39,.72);-webkit-backdrop-filter:blur(64px) saturate(.85);backdrop-filter:blur(64px) saturate(.85)}
  .window-edge{stroke:rgba(0,0,0,.72)}
  .window-highlight{stroke:rgba(255,255,255,.10)}
}

/* Tighter, borderless keyboard shortcut badge. */
.edit-button kbd{border:0;height:17px;padding:1.5px 4.5px;line-height:14px}
.edit-button{height:33px;top:9.5px;right:9.5px}

/* Invert the download CTA against the dark page. */
@media(prefers-color-scheme:dark){
  .download{background:linear-gradient(180deg,#fff,#f2f2f4);color:#1d1d1f;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(255,255,255,.22),0 3px 7px rgba(0,0,0,.2)}
  .download:hover{background:linear-gradient(180deg,#fff,#e7e7ea);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.3),0 4px 10px rgba(0,0,0,.25)}
  .download:active{background:#dedee2;box-shadow:inset 0 1px 3px rgba(0,0,0,.1),0 0 0 1px rgba(255,255,255,.22)}
  .download-apple{filter:none}
}

/* Decorative controls: hover feedback without actionable window symbols. */
.traffic-lights:hover span:first-child::before,
.traffic-lights:hover span:nth-child(2)::before,
.traffic-lights:hover span:nth-child(3)::before{content:'';inset:auto;left:50%;top:50%;right:auto;bottom:auto;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;clip-path:none;mask:none;-webkit-mask:none;background:rgba(0,0,0,.4);font-size:0;pointer-events:none}
.traffic-lights{cursor:default;user-select:none;-webkit-user-select:none}

.compatibility-note{margin:10px 0 0;font-size:10px;line-height:1.6;color:#86868b}
.compatibility-note span{margin:0 4px}
.privacy-note{position:relative;display:table;margin:6px auto 0;font-size:10px;line-height:1.6;color:#86868b}
.privacy-note summary{cursor:pointer;list-style:none;text-decoration:underline;text-decoration-color:rgba(134,134,139,.3);text-underline-offset:3px}
.privacy-note summary::-webkit-details-marker{display:none}
.privacy-note summary:hover{color:#515154}
.privacy-note summary:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:2px}
.privacy-note p{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(290px,70vw);margin:9px 0 0;padding:12px 14px;text-align:left;font-size:11px;line-height:1.6;color:#515154;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:9px;box-shadow:0 5px 20px rgba(0,0,0,.1);z-index:3}
@media(prefers-color-scheme:dark){
  .compatibility-note,.privacy-note{color:#98989f}
  .privacy-note summary:hover{color:#dedee3}
  .privacy-note p{color:#d1d1d6;background:#2b2b2e;border-color:rgba(255,255,255,.12);box-shadow:0 6px 22px rgba(0,0,0,.3)}
  .download{background:linear-gradient(180deg,#fff 0%,#f8f8fa 48%,#e7e7ec 100%);color:#242426;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.10),0 0 0 1px rgba(255,255,255,.28),0 2px 3px rgba(0,0,0,.2),0 5px 14px rgba(0,0,0,.16);text-shadow:0 1px 0 rgba(255,255,255,.65)}
  .download::after{background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 55%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
  .download:hover{background:linear-gradient(180deg,#fff,#fff 45%,#f0f0f5);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.08),0 0 0 1px rgba(255,255,255,.42),0 2px 4px rgba(0,0,0,.2),0 6px 18px rgba(0,0,0,.2)}
  .download:active{background:linear-gradient(180deg,#dedee5,#eaeaef);box-shadow:inset 0 1px 3px rgba(0,0,0,.14),0 0 0 1px rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.2)}
  .download-apple{filter:none;opacity:.88}
}
@media(max-width:759px){.compatibility-note{margin-top:7px}.privacy-note{margin-top:3px}.free-note{margin-top:10px}}

/* A distinct, crisp hover for the light CTA on the dark page. */
@media(prefers-color-scheme:dark){
  .download{background:linear-gradient(180deg,#f4f4f7,#dedee5);color:#1d1d1f;transition:background .16s ease,box-shadow .16s ease,transform .16s ease}
  .download:hover{background:linear-gradient(180deg,#fff 0%,#fff 55%,#f3f3f8 100%);color:#09090b;transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.1),0 0 0 1px rgba(255,255,255,.7),0 2px 4px rgba(0,0,0,.3),0 8px 20px rgba(0,0,0,.32),0 0 14px rgba(255,255,255,.09)}
  .download:hover::after{background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 65%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
  .download:hover .download-apple{opacity:1}
  .download:active{transform:translateY(0);background:linear-gradient(180deg,#d9d9e0,#e7e7ed);box-shadow:inset 0 2px 4px rgba(0,0,0,.14),0 0 0 1px rgba(255,255,255,.25),0 1px 3px rgba(0,0,0,.24)}
}

/* Typography follows Meteorite's serif headline / light system subtitle pair. */
.identity h1{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(64px,6.7vw,96px);font-weight:400;line-height:1;letter-spacing:-.025em;margin:0 0 24px;padding-bottom:4px;background:linear-gradient(180deg,#1d1d1f 20%,#1d1d1f 55%,rgba(29,29,31,.65));-webkit-background-clip:text;background-clip:text;color:transparent}
.identity .subtitle{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:clamp(16px,1.55vw,20px);font-weight:300;line-height:1.625;letter-spacing:-.025em;color:#6e6e73;margin:0 0 32px;-webkit-font-smoothing:antialiased}
@media(prefers-color-scheme:dark){.identity h1{background-image:linear-gradient(180deg,#fff 20%,#fff 55%,rgba(255,255,255,.55))}.identity .subtitle{color:#d4d4d4}}
@media(min-width:760px) and (max-height:700px){.identity h1{font-size:64px;margin-bottom:20px}.identity .subtitle{margin-bottom:26px}}
@media(max-width:759px){.identity h1{font-size:48px;margin-bottom:14px}.identity .subtitle{font-size:16px;margin-bottom:22px}}
@media(max-height:590px) and (max-width:759px){.identity h1{font-size:36px;margin-bottom:10px}.identity .subtitle{font-size:14px;margin-bottom:16px}}

/* On white, use a restrained graphite shift rather than fading the letters. */
@media(prefers-color-scheme:light){
  .identity h1{background-image:linear-gradient(180deg,#222224 15%,#303033 70%,#454548 100%)}
  .identity .subtitle{color:#626267;font-weight:350}
}

/* A quiet warm halo, isolated from the icon so its artwork stays crisp. */
.icon-aura{position:relative;isolation:isolate;width:fit-content;margin:0 auto 26px}
.icon-aura::before{content:'';position:absolute;z-index:-1;inset:-35%;border-radius:50%;background:radial-gradient(ellipse,rgba(237,225,154,.24) 0%,rgba(237,225,154,.12) 32%,rgba(237,225,154,.035) 55%,transparent 73%);filter:blur(18px);pointer-events:none}
.identity .icon-aura .app-icon{margin:0}
@media(prefers-color-scheme:dark){
  .identity .subtitle{color:#e5e5ea}
  .icon-aura::before{background:radial-gradient(ellipse,rgba(237,225,154,.18) 0%,rgba(237,225,154,.09) 32%,rgba(237,225,154,.025) 55%,transparent 73%)}
}
@media(min-width:760px) and (max-height:700px){.icon-aura{margin-bottom:18px}}
@media(max-width:759px){.icon-aura{margin-bottom:10px}.icon-aura::before{filter:blur(12px)}}
@media(max-height:590px) and (max-width:759px){.icon-aura{margin-bottom:5px}}


/* Slightly stronger warmth, preserving the existing halo geometry. */
.icon-aura::before{background:radial-gradient(ellipse,rgba(237,225,154,.30) 0%,rgba(237,225,154,.16) 32%,rgba(237,225,154,.05) 55%,transparent 73%)}
@media(prefers-color-scheme:dark){.icon-aura::before{background:radial-gradient(ellipse,rgba(237,225,154,.24) 0%,rgba(237,225,154,.12) 32%,rgba(237,225,154,.04) 55%,transparent 73%)}}

/* Editing has one full-width scroll owner; text margins are internal padding. */
.document-surface.is-editing{overflow:hidden}
.document-surface .editor{width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:28px 24px 48px;overflow:auto;scrollbar-width:thin;scrollbar-color:inherit;overscroll-behavior:contain}
@container(min-width:601px){.document-surface .editor{padding:42px max(52px,calc((100% - 740px)/2)) 64px}}

/* Responsive page structure: desktop spread, compact flowing presentation. */
@media(min-width:1000px){
  .spread{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .studio{min-width:0;padding:32px clamp(24px,3.4vw,64px)}
  .introduction{min-width:0;padding:40px 28px 76px}
  .identity{max-width:460px}
}
@media(min-width:1000px) and (max-height:650px){
  .spread{height:auto;min-height:100dvh;overflow:visible;align-items:stretch}
  .studio,.introduction{min-height:570px}
  .window-shell{height:490px}
}
@media(max-width:999px){
  body{overflow-x:hidden}
  .spread{display:flex;flex-direction:column;height:auto;min-height:100dvh;overflow:visible;background:var(--paper)}
  .introduction{order:0;display:flex;flex-direction:column;padding:52px 24px 30px;text-align:center;min-height:0;overflow:visible}
  .identity{width:100%;max-width:560px;animation:none}
  .identity .icon-aura{margin-bottom:20px}
  .identity .app-icon{width:100px;height:auto}
  .identity h1{font-size:72px;line-height:1;margin-bottom:20px}
  .identity .subtitle{font-size:19px;line-height:1.6;margin-bottom:28px;text-wrap:balance}
  .download{height:44px;padding:0 22px;font-size:14px}
  .free-note{margin-top:16px;font-size:11px}
  .compatibility-note{margin-top:10px;font-size:11px}
  .privacy-note{margin-top:6px;font-size:11px}
  .privacy-note p{position:static;transform:none;width:auto;max-width:360px;margin:10px auto 0}
  .project-signature{position:static;transform:none;margin-top:28px;gap:5px}
  .signature-name{font-size:14.5px;padding:6.5px}
  .studio{order:1;display:flex;justify-content:center;align-items:center;margin:0 24px 32px;padding:28px;border:1px solid rgba(0,0,0,.08);border-radius:22px;min-height:0;overflow:hidden}
  .window-shell{width:100%;max-width:740px;height:clamp(480px,72svh,680px)}
  .window-shell .app-window{height:100%;max-width:none}
  .document-surface{min-width:0}
  .titlebar{height:52px;min-height:52px}
  .window-title{max-width:calc(100% - 190px);font-size:13px}
  .icon-aura::before{filter:blur(18px)}
}
@media(max-width:480px){
  .introduction{padding:36px 20px 26px}
  .identity .app-icon{width:84px}
  .identity .icon-aura{margin-bottom:18px}
  .identity h1{font-size:60px;margin-bottom:16px}
  .identity .subtitle{font-size:17px;margin-bottom:25px}
  .studio{margin:0 12px 20px;padding:14px;border-radius:20px}
  .window-shell{height:clamp(460px,72svh,620px)}
  .window-title{font-size:11.5px;max-width:calc(100% - 175px);gap:4px;padding:0 4px}
  .window-title::before{width:10px;height:12px}
  .window-title::after{display:none}
  .edit-button{font-size:11px;gap:4px}
  .edit-button kbd{font-size:10px;padding-left:3.5px;padding-right:3.5px}
  .traffic-lights{gap:6px}
}
@media(max-width:359px){
  .introduction{padding-left:16px;padding-right:16px}
  .identity h1{font-size:54px}
  .identity .subtitle{font-size:16px}
  .studio{margin-left:8px;margin-right:8px;padding:10px}
  .window-title{max-width:calc(100% - 160px);font-size:10px}
}
@media(prefers-color-scheme:dark) and (max-width:999px){.studio{border-color:rgba(255,255,255,.1)}}

/* DOM order follows the compact reading/keyboard order; desktop keeps the demo left. */
@media(min-width:1000px){.studio{grid-column:1;grid-row:1}.introduction{grid-column:2;grid-row:1}}

/* A quiet page footer; more wallpaper and a smaller, uniformly scaled demo. */
.page-footer{display:flex;flex-direction:column;align-items:center;gap:12px}
.page-footer .project-signature{position:static;transform:none;margin:0}
.page-footer .privacy-note{margin:0}
.page-footer .privacy-note p{top:auto;bottom:100%;margin:0 0 10px}
@media(min-width:1000px){
  .studio{padding:60px clamp(40px,5vw,88px)}
  .window-shell{zoom:.9;max-width:620px;height:min(610px,72dvh)}
  .page-footer{position:absolute;bottom:22px;left:50%;right:0}
  .introduction{padding-bottom:120px}
}
@media(min-width:1000px) and (max-height:650px){.window-shell{height:460px}.page-footer{position:static;grid-column:2;grid-row:2;padding-bottom:24px}.introduction{padding-bottom:40px}}
@media(max-width:999px){
  .studio{padding:44px;margin-bottom:0}
  .window-shell{zoom:.9;max-width:680px;height:clamp(460px,68svh,620px)}
  .page-footer{order:2;padding:30px 24px 24px}
  .page-footer .privacy-note p{margin:10px auto 0}
}
@media(max-width:480px){.studio{padding:30px 24px}.window-shell{zoom:.88;height:500px}.page-footer{padding-top:26px}}
@media(max-width:359px){.studio{padding:26px 20px}}

.download-modal{width:min(440px,calc(100% - 40px));padding:26px;border:1px solid rgba(0,0,0,.12);border-radius:18px;background:#fff;color:#1d1d1f;box-shadow:0 24px 80px rgba(0,0,0,.25)}
.download-modal::backdrop{background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.download-modal h2{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;letter-spacing:-.025em;line-height:1.3;margin:0 0 14px}
.download-modal h2 svg{width:22px;height:22px;flex-shrink:0}
.download-modal>p{font-size:14px;line-height:1.7;color:#737378;margin:0 0 20px}
.download-modal input{width:100%;min-width:0;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:9px;background:#f5f5f7;color:inherit}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.modal-actions button{min-height:44px;padding:0 16px;border:0;border-radius:8px;font-size:14px;background:transparent}
.modal-actions #copy-download{background:#1d1d1f;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 4px rgba(0,0,0,.12)}
.download-modal .copy-status{font-size:11px;margin:12px 0 0;min-height:0}
.download-modal .copy-status:empty{display:none}
@media(prefers-color-scheme:dark){.download-modal{background:#1d1d1f;color:#f5f5f7;border-color:rgba(255,255,255,.14)}.download-modal>p{color:#b4b4bb}.download-modal input{background:#29292c;border-color:rgba(255,255,255,.12)}.modal-actions #copy-download{background:linear-gradient(#fff,#e7e7ec);color:#1d1d1f}}
@media(max-width:999px){
  .introduction{padding-top:clamp(80px,16svh,160px);padding-bottom:60px;min-height:72svh;justify-content:center}
  .studio{margin-bottom:24px}
  .page-footer{padding-top:28px;padding-bottom:max(52px,env(safe-area-inset-bottom))}
  .document{font-size:14px;padding-top:24px;padding-bottom:40px}
  .document-surface .editor{font-size:14px;padding-top:24px;padding-bottom:40px}
}
@media(max-width:480px){
  .introduction{padding-top:clamp(84px,17svh,140px);padding-bottom:64px}
  .window-shell{height:470px}
  .document{font-size:13px;width:calc(100% - 36px)}
  .document-surface .editor{font-size:13px;padding-left:18px;padding-right:18px}
  .studio{margin-bottom:28px}
}
@media(max-height:500px) and (max-width:999px){.introduction{padding-top:60px;padding-bottom:52px;min-height:0}}

/* iOS zooms focused form fields below 16px. Keep this selectable link at 16px. */
.download-modal input{font-size:16px}
.compatibility-note{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:12px;line-height:1.4}
.compatibility-note span{display:inline-flex;align-items:center;margin:0;padding:6px 10px;border:1px solid rgba(0,0,0,.08);border-radius:7px;background:rgba(0,0,0,.025);color:#737378}
.page-footer .project-signature{min-width:130px;min-height:54px;justify-content:center;cursor:pointer;touch-action:manipulation}
.page-footer .project-signature .signature-name{padding:7px 10px}
@media(prefers-color-scheme:dark){.compatibility-note span{color:#b8b8c0;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.035)}}
@media(max-width:999px){.compatibility-note{font-size:11px;margin-top:14px;gap:7px}.compatibility-note span{padding:5px 9px}}

/* One entrance sequence; each element owns its motion rather than the parent. */
.identity{animation:none}
.identity .app-icon{animation:none}
.icon-aura{animation:identity-arrive .65s cubic-bezier(.2,.7,.25,1) 0s both}
.identity h1{animation:identity-arrive .65s cubic-bezier(.2,.7,.25,1) .14s both}
.identity .subtitle{animation:identity-arrive .65s cubic-bezier(.2,.7,.25,1) .28s both}
.identity .download{animation:identity-arrive .6s cubic-bezier(.2,.7,.25,1) .43s both}
.identity .free-note{animation:identity-arrive .6s cubic-bezier(.2,.7,.25,1) .53s both}
.identity .compatibility-note{animation:identity-arrive .6s cubic-bezier(.2,.7,.25,1) .62s both}
@media(prefers-reduced-motion:reduce){.icon-aura,.identity h1,.identity .subtitle,.identity .download,.identity .free-note,.identity .compatibility-note{animation:none!important}}
@font-face{font-family:Baunk;src:url('assets/Baunk.ttf') format('truetype');font-weight:400;font-display:swap}

/* Touch controls must not depend on a hover state. */
@media(hover:none),(pointer:coarse){
  .document .lm-copy-btn{opacity:.8;width:36px;height:36px;touch-action:manipulation}
  .document .lm-copy-btn::before{inset:-4px}
  .document .lm-copy-table-btn{top:2px;right:5px}
  .document .lm-sort-indicator{opacity:.55}
  .document th:last-child .lm-th-clip{padding-right:28px}
  .document blockquote{padding-top:42px}
  .document .lm-copy-bq-btn{top:3px;right:5px}
  .document pre{padding-top:42px}
  .document .lm-copy-code-btn{top:3px;right:5px}
}
.mobile-scroll-track{display:none}
@media(hover:none),(pointer:coarse){
  .document-surface,.document-surface .editor{scrollbar-width:none}
  .document-surface::-webkit-scrollbar,.editor::-webkit-scrollbar{display:none}
  .mobile-scroll-track{display:block;position:absolute;top:58px;bottom:12px;right:3px;width:14px;z-index:4;touch-action:none;cursor:default}
  .mobile-scroll-thumb{width:4px;margin:auto;border-radius:4px;background:rgba(0,0,0,.32);pointer-events:auto}
  .mobile-scroll-track.no-overflow{opacity:.25}
}
@media(prefers-color-scheme:dark) and (hover:none),(prefers-color-scheme:dark) and (pointer:coarse){.mobile-scroll-thumb{background:rgba(255,255,255,.4)}}

/* Match the shadow to the native outline, with no rectangular backing layer. */
.window-shell::before{content:none}
.window-shadow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1}
.window-shell .app-window{mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
/* Narrow layouts also need the persistent track when browser input detection varies. */
@media(max-width:999px){
  .document-surface,.document-surface .editor{scrollbar-width:none}
  .document-surface::-webkit-scrollbar,.editor::-webkit-scrollbar{display:none}
  .mobile-scroll-track{display:block;position:absolute;top:58px;bottom:12px;right:3px;width:14px;z-index:4;touch-action:none;cursor:default}
  .mobile-scroll-thumb{display:block;width:5px;min-height:36px;margin:0 auto;border-radius:4px;background:rgba(0,0,0,.4)}
  .mobile-scroll-track.no-overflow{opacity:.35}
}
@media(prefers-color-scheme:dark) and (max-width:999px){.mobile-scroll-thumb{background:rgba(255,255,255,.55)}}

/* Native SF Symbols: macbook for OS support, cpu for Apple silicon. */
.compatibility-note span{gap:6px}
.badge-symbol{display:block;width:17px;height:17px;flex-shrink:0;background:currentColor;mask:center/contain no-repeat;-webkit-mask:center/contain no-repeat}
.badge-macbook{mask-image:url('assets/macbook-symbol.png');-webkit-mask-image:url('assets/macbook-symbol.png')}
.badge-cpu{mask-image:url('assets/cpu-symbol.png');-webkit-mask-image:url('assets/cpu-symbol.png')}
/* Restore original desktop window geometry: scaling belongs to mobile only. */
@media(min-width:1000px){
  .studio{padding:44px clamp(24px,4.5vw,72px)}
  .window-shell{zoom:1;max-width:660px;height:min(650px,74dvh)}
}
@media(min-width:1000px) and (max-height:700px){.studio{padding-top:25px;padding-bottom:25px}.window-shell{height:74dvh}}
/* Compact desktop/tablet layout stays full-scale unless the device is touch-first. */
@media(min-width:760px) and (max-width:999px) and (hover:hover) and (pointer:fine){
  .studio{padding:28px}
  .window-shell{zoom:1;max-width:740px;height:clamp(480px,72svh,680px)}
}
.footer-links{display:flex;justify-content:center;gap:18px;font-size:10px;color:#86868b}
.footer-links a{padding:7px 0}.footer-links a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:999px){.footer-links{font-size:11px}}

/* Keep the mobile indicator against the window edge, with its hit area inward. */
@media(hover:none),(pointer:coarse),(max-width:759px){
  .mobile-scroll-track{right:1px;width:13px}
  .mobile-scroll-thumb{margin-left:auto;margin-right:2px}
}

.identity .free-note{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:13px;font-weight:300;line-height:1.625;letter-spacing:-.025em;color:#86868b;margin-bottom:12px;-webkit-font-smoothing:antialiased}
.page-footer .project-signature>span:first-child{font-size:8.5px}
.page-footer .signature-name{font-size:16px}
@media(prefers-color-scheme:dark){.identity .free-note{color:#a1a1a8}}

/* Give the free promise more presence and separate platform details. */
.identity .free-note{font-size:16px;color:#737378;margin-bottom:20px}
.identity .compatibility-note{margin-top:12px}
@media(prefers-color-scheme:dark){.identity .free-note{color:#b4b4bb}}

/* Mobile modal stays fixed without focusing a button or shifting the page. */
html{background:var(--paper)}
.download-modal{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain}
.download-modal::backdrop{position:fixed;inset:0}
#download-modal-title:focus{outline:none}
.download-modal .copy-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.modal-actions #copy-download{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;min-width:122px;border-radius:10px;isolation:isolate;background:linear-gradient(180deg,#29292b,#1d1d1f);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 0 1px rgba(0,0,0,.85),0 3px 7px rgba(0,0,0,.14);transform:none}
.modal-actions #copy-download:hover{background:linear-gradient(180deg,#3b3b3d,#29292b);transform:none}
#copy-download svg{width:17px;height:17px;flex:none}
#copy-download .copy-link-check{display:none}
#copy-download[data-copied] .copy-link-icon{display:none}
#copy-download[data-copied] .copy-link-check{display:block}
@media(prefers-color-scheme:dark){.modal-actions #copy-download{background:linear-gradient(180deg,#fff,#f8f8fa 48%,#e7e7ec);color:#242426;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.1),0 0 0 1px rgba(255,255,255,.28),0 3px 9px rgba(0,0,0,.2)}.modal-actions #copy-download:hover{background:linear-gradient(180deg,#fff,#fff 45%,#f0f0f5)}}
@media(hover:none),(pointer:coarse),(max-width:759px){.mobile-scroll-track{right:0}.mobile-scroll-thumb{margin-right:1px}}