/* Hallmark · macrostructure: Narrative Workflow · tone: technical · anchor hue: olive · theme: studied-DNA (source: https://ceetrix.com/) · studied: yes */
@import url('tokens.css');
*,*::before,*::after{box-sizing:border-box}html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:6rem}body{margin:0;overflow-x:clip;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}a,button{touch-action:manipulation}button:disabled{cursor:default;opacity:.5}a:focus-visible,button:focus-visible,[tabindex]:focus-visible,video:focus-visible{outline:2px solid var(--color-accent);outline-offset:5px}::selection{color:var(--color-on-accent);background:var(--color-accent)}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--font-display);text-wrap:balance;overflow-wrap:anywhere;min-width:0}h2{font-size:var(--text-title);font-weight:500;line-height:1.13;letter-spacing:-.045em}h3{font-size:var(--text-md);font-weight:500;line-height:1.3;letter-spacing:-.02em}p{text-wrap:pretty}svg{display:block}button{border:0}button:active,.button:active{transform:scale(.97)}button,.button{transition:transform var(--dur-micro) var(--ease-out)}[hidden]{display:none!important}.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--space-md)}.section-space{padding-block:var(--space-4xl)}.skip{position:fixed;top:var(--space-md);left:var(--space-md);padding:var(--space-md);background:var(--color-accent);color:var(--color-on-accent);z-index:500;transform:translateY(-200%)}.skip:focus{transform:none}.site-header{position:sticky;top:0;z-index:200;background:var(--color-paper);border-bottom:var(--rule-thin) solid var(--color-rule)}.header-inner{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}.brand{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-md);font-weight:500;letter-spacing:-.05em;white-space:nowrap}.brand svg{width:32px;height:32px;fill:none;stroke:var(--color-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.brand-with{font-family:var(--font-hand);font-size:var(--text-lg);font-weight:500;padding-inline:var(--space-xs);color:var(--color-muted)}#site-nav{display:none}.menu-toggle{color:var(--color-ink);background:transparent;min-height:44px;padding:var(--space-sm);display:flex;gap:var(--space-sm);align-items:center;font-size:var(--text-sm)}#site-nav.open{position:absolute;top:100%;left:0;right:0;padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);background:var(--color-surface);border-bottom:var(--rule-thin) solid var(--color-rule)}#site-nav a{min-height:44px;display:flex;align-items:center;white-space:nowrap;font-size:var(--text-sm);color:var(--color-muted)}#site-nav .nav-star{color:var(--color-ink);gap:var(--space-sm)}.nav-star span:first-child{font-size:var(--text-lg);color:var(--color-accent)}
.hero{text-align:center;padding-top:var(--space-3xl);padding-bottom:var(--space-3xl)}.release{display:inline-flex;gap:var(--space-sm);align-items:center;font-size:var(--text-sm);color:var(--color-muted);min-height:32px}.release-dot{width:6px;height:6px;border-radius:50%;background:var(--color-accent)}.release span:last-child{padding-left:var(--space-sm)}h1{font-size:var(--text-display);line-height:1.09;letter-spacing:-.055em;font-weight:500;margin-block:var(--space-lg) var(--space-xl)}.marked{position:relative;display:inline-block;color:var(--color-accent)}.underline{position:absolute;left:0;bottom:-.1em;width:100%;height:.3em;overflow:visible;fill:none;stroke:var(--color-accent);stroke-width:2;stroke-linecap:round}.hero-lead{font-size:var(--text-md);color:var(--color-muted);line-height:1.6;max-width:640px;margin-inline:auto}.hero-actions,.closing-actions{display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:center;margin-top:var(--space-xl)}.button{display:inline-flex;justify-content:center;align-items:center;gap:var(--space-sm);min-height:50px;padding:var(--space-sm) var(--space-lg);border:var(--rule-thin) solid transparent;border-radius:var(--radius-sm);font-size:var(--text-base);font-weight:500;white-space:nowrap}.primary{background:var(--color-accent);color:var(--color-on-accent)}.primary:hover{background:var(--color-accent-hover)}.secondary{background:transparent;border-color:var(--color-rule);color:var(--color-ink)}.secondary:hover{background:var(--color-raised)}.button>span:last-child{margin-left:var(--space-xs)}.hero-note{margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--color-muted)}.play-icon{font-size:var(--text-lg);line-height:1}.desktop-br{display:none}
.story{padding-top:var(--space-xl)}.story-top{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-lg);margin-bottom:var(--space-xl)}.story-top h2{font-size:var(--text-lg);letter-spacing:-.03em;line-height:1.3}.story-top h2 br{display:none}.story-top h2 span{color:var(--color-muted)}.hand-note{display:none;font-family:var(--font-hand);font-size:var(--text-lg);color:var(--color-accent);transform:rotate(-4deg)}.hand-note svg{width:70px;height:40px;fill:none;stroke:currentColor;stroke-width:1.5;position:absolute;right:0;top:100%}.demo{background:var(--color-surface);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-lg);overflow:hidden}.demo-heading{padding:var(--space-md) var(--space-lg);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-sm);border-bottom:var(--rule-thin) solid var(--color-rule);font-size:var(--text-sm);color:var(--color-muted)}.demo-step{color:var(--color-accent)}.demo-scene{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:var(--space-lg);padding:var(--space-xl) var(--space-lg) var(--space-2xl);min-height:380px}.conversation{text-align:center}.scene-label{font-size:var(--text-sm);color:var(--color-muted)}.scene-sketch{width:150px;height:118px;margin-inline:auto;margin-block:var(--space-sm)}.sk{overflow:visible}.sk text{font-family:var(--font-hand);font-size:15px;fill:var(--color-ink)}.agent-says{font-size:var(--text-lg);letter-spacing:-.03em}.pending-line{font-size:var(--text-sm);color:var(--color-warn);margin-top:var(--space-sm)}.pending-line span{margin-right:var(--space-xs)}.conversation-content{min-height:73px}.bridge{display:none;align-self:center;text-align:center;color:var(--color-muted)}.bridge svg{width:100%;fill:none;stroke:var(--color-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.bridge-label{font-family:var(--font-hand);font-size:var(--text-lg);white-space:nowrap}.saved-files{position:relative;width:100%;max-width:370px;margin-inline:auto;padding-top:var(--space-xl)}.file-page{color:var(--color-sheet-ink);background:var(--color-sheet);border:var(--rule-thin) solid var(--color-sheet-muted);border-radius:2px;padding:var(--space-lg);font-size:var(--text-sm)}.page-back,.page-middle{position:absolute;inset:0 var(--space-md) auto;height:230px;pointer-events:none;transform:rotate(4deg);font-family:var(--font-mono)}.page-back{top:var(--space-xs);opacity:.56;transform:rotate(-5deg)}.page-middle{top:var(--space-md);transform:rotate(2.5deg);opacity:.84}.page-front{position:relative;transform:rotate(-2deg);box-shadow:0 16px 24px var(--color-shadow)}.paper-title{display:flex;justify-content:space-between;gap:var(--space-sm);font-family:var(--font-mono);font-size:var(--text-sm);padding-bottom:var(--space-md);border-bottom:var(--rule-thin) solid var(--color-sheet-muted)}.save-mark{color:var(--color-sheet-muted);font-family:var(--font-hand);font-size:var(--text-md)}.paper-heading{font-size:var(--text-md);line-height:1.3;margin-top:var(--space-md);font-weight:600}.file-page ul{padding:0;list-style:none;margin:var(--space-md) 0;display:grid;gap:var(--space-sm)}.file-page li{display:flex;gap:var(--space-sm);align-items:center}.check,.empty-box{display:inline-block;min-width:14px;text-align:center}.empty-box{width:14px;height:14px;border:var(--rule-thin) solid var(--color-sheet-ink);border-radius:2px}.unfinished{font-weight:600}.paper-next{font-family:var(--font-hand);font-size:var(--text-md);color:var(--color-sheet-muted);line-height:1.1}.demo-bottom{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--space-lg);padding:var(--space-lg);border-top:var(--rule-thin) solid var(--color-rule)}.demo-bottom p{font-size:var(--text-sm);color:var(--color-muted);max-width:500px}.demo-bottom button{min-height:44px;font-size:var(--text-sm)}.demo-footnote{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding-top:var(--space-sm);font-size:var(--text-sm);color:var(--color-muted)}.demo-footnote>span{max-width:65%}.text-button{display:inline-flex;gap:var(--space-sm);align-items:center;white-space:nowrap;background:transparent;color:var(--color-muted);min-height:44px;font-size:var(--text-sm);padding:var(--space-xs)}.text-button:hover{color:var(--color-ink)}.demo[data-state="reset"] .scene-sketch{opacity:.3}.demo[data-state="reset"] .bridge{opacity:.45}.demo[data-state="recovered"] .bridge svg{transform:rotate(180deg)}.demo[data-state="recovered"] .pending-line{color:var(--color-accent)}
.section-intro{display:grid;gap:var(--space-lg);margin-bottom:var(--space-2xl)}.section-intro p{max-width:42ch;color:var(--color-muted)}.file-workbench{display:grid;gap:var(--space-xl)}.file-options{display:grid;align-content:start;gap:var(--space-sm)}.file-options button{background:transparent;color:var(--color-muted);padding:var(--space-md);text-align:left;display:flex;flex-direction:column;gap:var(--space-xs);min-width:0;border-radius:var(--radius-sm)}.file-options button[aria-selected="true"]{background:var(--color-raised);color:var(--color-ink)}.file-options button:hover{background:var(--color-surface)}.file-options button[aria-selected="true"]:hover{background:var(--color-raised)}.file-tab-name{font-family:var(--font-mono);font-size:var(--text-base);display:flex;justify-content:space-between;gap:var(--space-lg);width:100%;white-space:nowrap}.file-tab-name span{color:var(--color-accent);opacity:0}.file-options button[aria-selected="true"] .file-tab-name span{opacity:1}.file-tab-copy{font-size:var(--text-sm);color:var(--color-muted)}.file-preview{background:var(--color-surface);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-md);overflow:hidden;min-width:0}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-md) var(--space-lg);font-family:var(--font-mono);font-size:var(--text-sm);border-bottom:var(--rule-thin) solid var(--color-rule)}.preview-heading span:last-child{color:var(--color-muted);font-family:var(--font-body)}.file-preview pre{padding:var(--space-lg);margin:0;font-size:var(--text-sm);line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;min-height:370px}.file-preview code{font-family:var(--font-mono)}.code-heading{color:var(--color-ink)}.code-muted,.code-done{color:var(--color-muted)}.code-accent{color:var(--color-accent)}.section-note{margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--color-muted)}.section-note a{color:var(--color-ink);text-decoration:underline;text-underline-offset:4px}.host-section{background:var(--color-surface);border-block:var(--rule-thin) solid var(--color-rule)}.host-grid{display:grid;gap:var(--space-2xl)}.host-sketch{width:140px;height:110px;margin-bottom:var(--space-lg)}.muted-text{color:var(--color-muted)}.host-intro>p{color:var(--color-muted);max-width:39ch;margin-top:var(--space-lg)}.inline-link{display:inline-flex;gap:var(--space-lg);align-items:center;min-height:44px;margin-top:var(--space-lg);color:var(--color-accent);text-decoration:underline;text-underline-offset:5px;white-space:nowrap}.host-details{display:grid;gap:var(--space-xl)}.host-line{display:flex;gap:var(--space-md)}.host-line p{margin-top:var(--space-sm);color:var(--color-muted);font-size:var(--text-base);max-width:46ch}.small-check{color:var(--color-accent);min-width:24px;line-height:1.3;font-size:var(--text-lg)}.host-boundary{font-size:var(--text-sm);color:var(--color-muted);border-top:var(--rule-thin) solid var(--color-rule);padding-top:var(--space-lg)}.host-names{display:flex;flex-wrap:wrap;gap:var(--space-lg) var(--space-xl);align-items:center;margin-top:var(--space-3xl)}.host-names span{font-size:var(--text-md);letter-spacing:-.03em;color:var(--color-muted)}.host-names a{font-size:var(--text-sm);min-height:44px;display:flex;align-items:center;gap:var(--space-sm);white-space:nowrap}.film-section{display:grid;gap:var(--space-xl);align-items:center}.film-copy p{max-width:31ch;margin-top:var(--space-lg);color:var(--color-muted)}.film-caption{display:block;margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--color-muted)}.film{min-width:0}.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-md);outline:var(--rule-thin) solid var(--color-rule);outline-offset:-1px}.film figcaption{font-size:var(--text-sm);color:var(--color-muted);margin-top:var(--space-sm)}
.contribute-section{padding-top:var(--space-xl)}.contribute-intro{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-2xl)}.contribute-intro p{margin-top:var(--space-lg);color:var(--color-muted)}.contribute-sketch{display:none;width:160px;height:126px;flex-shrink:0}.contribution{display:grid;gap:var(--space-lg);padding-block:var(--space-xl);border-top:var(--rule-thin) solid var(--color-rule)}.contribution:last-child{border-bottom:var(--rule-thin) solid var(--color-rule)}.contribution-kind{display:block;font-size:var(--text-sm);color:var(--color-accent);margin-bottom:var(--space-sm)}.contribution h3{font-size:var(--text-lg);font-weight:500}.contribution p{max-width:64ch;color:var(--color-muted);margin-top:var(--space-sm)}.contribution-link{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-lg);min-height:44px;font-size:var(--text-base);white-space:nowrap;align-self:center;justify-self:start}.contribution-link span{color:var(--color-accent)}.contribution-link:hover{text-decoration:underline;text-underline-offset:6px}.install-section{text-align:center;padding-top:var(--space-xl)}.install-sketch{width:130px;height:102px;margin-inline:auto;margin-bottom:var(--space-lg)}.install-section h2 span{color:var(--color-accent)}.install-section>p:not(.copy-status){margin-top:var(--space-lg);color:var(--color-muted)}.install-command{max-width:850px;margin-inline:auto;margin-top:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-md);background:var(--color-surface);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-sm);text-align:left;align-items:flex-start}.install-command code{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-ink);overflow-wrap:anywhere;white-space:pre-wrap}.install-command button{display:inline-flex;gap:var(--space-sm);align-items:center;justify-content:center;min-height:40px;padding:var(--space-sm) var(--space-md);color:var(--color-ink);background:var(--color-raised);border-radius:var(--radius-sm);font-size:var(--text-sm);white-space:nowrap}.copy-status{height:24px;font-size:var(--text-sm);color:var(--color-accent);padding-top:var(--space-xs)}.install-section .install-note{font-size:var(--text-sm);margin-top:0!important}.closing-actions{margin-top:var(--space-lg)}.site-footer{padding-block:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-xl);border-top:var(--rule-thin) solid var(--color-rule);font-size:var(--text-sm);color:var(--color-muted)}.site-footer>div{display:flex;flex-direction:column;gap:var(--space-sm)}.footer-brand{color:var(--color-ink);font-family:var(--font-hand);font-size:var(--text-lg);white-space:nowrap}.site-footer nav{display:flex;gap:var(--space-lg);flex-wrap:wrap}.site-footer nav a{display:flex;align-items:center;min-height:44px;white-space:nowrap}.site-footer a:hover{color:var(--color-accent)}
@media(min-width:40rem){.wrap{padding-inline:var(--space-xl)}.hero{padding-top:var(--space-4xl);padding-bottom:var(--space-3xl)}.desktop-br{display:initial}.hand-note{display:block;margin-right:var(--space-2xl)}.story-top h2{font-size:var(--text-md)}.demo-scene{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl);padding:var(--space-2xl) var(--space-xl) var(--space-3xl)}.demo-bottom{flex-direction:row;align-items:center;padding:var(--space-lg) var(--space-xl)}.demo-bottom p{max-width:50%}.contribute-sketch{display:block}.install-command{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-lg)}.install-command code{max-width:calc(100% - 90px)}.site-footer{flex-direction:row;justify-content:space-between;align-items:center}.site-footer>div{gap:var(--space-xs)}}
@media(min-width:60rem){.menu-toggle{display:none}#site-nav{display:flex;align-items:center;gap:var(--space-xl)}#site-nav a:hover{color:var(--color-ink)}#site-nav .nav-star{border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-sm);padding-inline:var(--space-md);margin-left:var(--space-sm)}.section-space{padding-block:var(--space-5xl)}.hero{padding-top:var(--space-4xl)}.hero-note{margin-top:var(--space-xl)}.hero-actions{margin-top:var(--space-xl)}.story{padding-top:var(--space-xl)}.demo-scene{grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);gap:var(--space-xl);padding-inline:var(--space-3xl);min-height:370px}.bridge{display:block}.story-top h2{font-size:var(--text-lg)}.section-intro{grid-template-columns:1.1fr 1fr;align-items:end;gap:var(--space-3xl)}.file-workbench{grid-template-columns:.75fr 1.25fr;gap:var(--space-3xl)}.file-options button{padding:var(--space-lg)}.file-preview pre{padding:var(--space-xl);min-height:410px}.host-grid{grid-template-columns:1fr 1fr;gap:var(--space-4xl);align-items:center}.host-names{justify-content:space-between}.host-details{gap:var(--space-2xl)}.film-section{grid-template-columns:.65fr 1.35fr;gap:var(--space-3xl)}.contribution{grid-template-columns:minmax(0,1fr) 230px;gap:var(--space-3xl);padding-block:var(--space-2xl)}.contribution-link{justify-self:end}.contribute-section{padding-top:var(--space-xl)}.install-section{padding-top:var(--space-xl)}.contribute-intro{margin-bottom:var(--space-2xl)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:0.01ms!important;animation-delay:0ms!important;transition-duration:0.01ms!important}.underline path,.draw-path,.sk path{stroke-dashoffset:0!important}}