/* Shared visual language with todo-editor/src/index.css. Marketing layout,
   native TODO surfaces, typography, borders and controls. */
:root{--paper:#f5f5f5;--ink:#1c1c1c;--muted:#5c5c5c;--orange:#353535;--line:#cecece;--sans:'DM Sans','Segoe UI','Microsoft YaHei UI',system-ui,sans-serif;--serif:var(--sans)}
body{background:var(--paper)}
h1,h2,h3,.serif-accent{font-family:var(--sans);font-weight:600}
button:focus-visible,a:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:#666}
::selection{background:#dedede;color:#1c1c1c}
.header{height:76px;background:#fff;border-bottom:1px solid var(--line);max-width:none;padding-inline:max(5.5%,calc((100vw - 1320px)/2))}
.header nav{gap:12px}.header nav a{padding:9px 12px;color:#5c5c5c;border:1px solid transparent;border-radius:3px}
.header nav a.active{color:#1c1c1c;background:#ededed;border-color:#cecece}.header nav a.active:after{display:none}
.brand>span{font-size:22px;letter-spacing:.5px}.brand-caption{letter-spacing:1px;color:#666}.brand img{width:32px;height:32px}
.button{background:#353535;color:#fff;border-color:#353535;border-radius:3px;padding:14px 22px;box-shadow:none}
.button:hover{background:#202020;transform:none}.button.small{padding:10px 16px}
.underline,.art-note,.closing-spark,.manifesto-spark,.idea-sticker{display:none}
.dot{border-radius:1px;background:#353535}.orange-period,.value-icon{color:#353535}
.home-hero{grid-template-columns:.8fr 1.2fr;gap:40px;padding-block:64px;min-height:540px}
.home-hero h1{font-size:clamp(35px,3.5vw,52px);line-height:1.5;white-space:normal}
.hero-art{padding:0;min-width:0}.hero-art .software-shot figcaption{padding:14px 16px}.hero-art .screenshot-guide{display:none}.hero-art .screenshot-expand{font-size:10px;padding:8px 10px}
.capability-strip{background:#ededed}.section-number,.journey-num,.tiny-label{font-family:var(--sans);color:#666}
.studio-section,.principles,.quote-band,.closing,.last-word{background:#ededed;border-block:1px solid #cecece}
.studio-section{padding-inline:6%}.studio-section .software-shot{max-width:1180px;margin:auto}
.value-grid{padding-left:0;gap:20px}.value-grid article{background:#fff;border:1px solid #cecece;padding:28px!important;border-radius:3px}.value-grid article:last-child{border:1px solid #cecece}
.value-grid h3{font-size:24px}.value-grid p{max-width:none}.value-grid a{border-color:#777}
.scenario-mini,.story-visual,.philosophy-art>img{border-radius:3px;box-shadow:none;border:1px solid #cecece}
.scenario-mini>div:last-child{background:#fff}.scenario-mini>div:last-child>span,.story-label,.story-steps,.story-example,.scenario-disclaimer{color:#666}
.chalk-art{background:#292929;color:#f5f5f5}.chalk-art>span,.chalk-art>em{color:#ccc}.chalk-diagram>span{border-color:#aaa;color:#eee}
.start-aside,.start-aside h3,.start-aside p,.start-aside .tiny-label{color:#353535}.aside-divider{background:#cecece}
.filter-bar button,.feature-jump a,.idea-examples button,.visual-tabs button,.pathway-tabs button{background:#fff;color:#353535;border:1px solid #cecece;border-radius:3px}
.filter-bar button.active,.filter-bar button[aria-pressed=true],.feature-jump a:hover,.visual-tabs button[aria-selected=true],.pathway-tabs button[aria-selected=true]{background:#353535;color:#fff;border-color:#353535}
.demo-panel,.start-main,.start-aside,.honest-note{background:#fff;border:1px solid #cecece;border-radius:3px;box-shadow:none}
.demo-tabs{background:#ededed;border:1px solid #cecece;border-radius:3px}.demo-tabs button{border-radius:2px}.demo-tabs button.active{background:#353535;color:#fff;box-shadow:none}
.demo-context,.demo-script,.revision-feedback,.frame-topic,.demo-frame>span{background:#f5f5f5;border-color:#cecece;color:#5c5c5c}
.demo-status,.benefit,.workflow-shot-link,.shot-guide-button em{color:#353535}.demo-status{background:#ededed;border-radius:3px}
.idea-label textarea{background:#fff;border:1px solid #cecece;border-radius:3px}.idea-examples button:hover{background:#ededed;color:#1c1c1c}
.software-shot{background:#fff;border:1px solid #cecece;border-radius:3px;box-shadow:none}
.software-shot figcaption p,.screenshot-guide span{color:#5c5c5c}.screenshot-guide{border-color:#cecece}.screenshot-guide li:before{color:#353535;border-color:#aaa;border-radius:3px;background:#ededed}
.screenshot-open{background:#ededed}.screenshot-expand{background:#353535eF;border-radius:3px}
.screenshot-dialog,.screenshot-dialog::backdrop{background:#1c1c1c}.screenshot-toolbar{background:#292929}.screenshot-caption,.screenshot-status{color:#ccc}.screenshot-toolbar .tiny-label{color:#ccc}.screenshot-actions button,.screenshot-actions a{border-radius:3px;color:#f5f5f5}.screenshot-actions :focus-visible{outline-color:#aaa}
.extension-intro{background:#ededed;border-color:#cecece;border-radius:3px;gap:40px}
.extension-package{background:#fff;border:1px solid #cecece;border-radius:3px;box-shadow:none;transform:none;padding:28px}
.extension-package>span,.extension-steps b,.pathway-steps li>span{color:#666;font-family:var(--sans)}
.extension-package b span{font-family:var(--sans);color:#353535}.extension-package i{background:#f5f5f5;border-color:#cecece;border-radius:3px}
.extension-types article{background:#fff;border:1px solid #cecece;padding:24px;border-radius:3px}
.extension-boundary,.pathway-note{background:#ededed;border-left-color:#666}
.extension-future{background:#292929;color:#f5f5f5;border:1px solid #242424;border-radius:3px}
.extension-future p,.extension-future small,.method-detail ul{color:#ccc}.extension-future .serif-accent,.method-file strong{color:#fff;font-family:var(--sans)}
.extension-future .tiny-label,.method-intro>span,.method-flow span,.method-flow>i{color:#bbb}
.extension-future .future-statement,.method-intro{color:#f5f5f5!important}
.method-explorer,.method-flow>div{border-radius:3px}.method-flow .method-file{border-color:#999;background:#ffffff08}
.method-tabs button{border-radius:3px;color:#ddd}.method-tabs button[aria-selected=true]{background:#ededed;color:#1c1c1c;border-color:#ededed}.future-methods span{border-radius:3px}
.method-tabs button:focus-visible,.method-explorer [role=tabpanel]:focus-visible{outline-color:#aaa}
.manifesto-hero h1{font-weight:600}.belief-section .belief-emphasis{font-family:var(--sans)}
footer{background:#fff;border-top:1px solid #cecece}.footer-bottom{color:#666}.toast{background:#353535;color:#fff;border-radius:3px;box-shadow:none}
@media(max-width:1100px){.header{padding-inline:4%;gap:12px}.header nav{gap:4px}.header nav a{padding:9px 8px}.home-hero{gap:25px}.home-hero h1{font-size:38px}}
@media(max-width:800px){.header{height:72px;padding-inline:5%}.header nav{top:72px;background:#fff;box-shadow:none;gap:4px}.header nav a{padding:13px 12px}.home-hero{grid-template-columns:1fr;padding:40px 6%;gap:30px}.hero-art{padding:0;max-width:none}.home-hero h1{font-size:40px}.value-grid{gap:12px}.value-grid article{padding:20px!important}.value-grid h3{font-size:21px}.extension-intro{gap:26px}}
@media(max-width:540px){.home-hero h1{font-size:35px}.value-grid{gap:15px}.value-grid article{display:block}.value-icon{margin-bottom:16px}.value-grid h3 br{display:none}.value-grid h3{font-size:23px}.header .brand>span{font-size:19px}.hero-art .software-shot figcaption p{font-size:11px}.hero-art .screenshot-expand{font-size:9px}.extension-types article{padding:20px}.extension-package b span{font-size:34px}}

/* Paper cut, ink lines and offset shadows. Screenshots remain untouched. */
:root{--paper:#f1f1ef;--ink:#191919;--line:#292929;--orange:#191919}
body{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M8 18h2m39 27h1m43 51h2M22 93h1m77-77h1' stroke='%23777' stroke-opacity='.13'/%3E%3C/svg%3E")}
.header{border-bottom:2px solid #222;background:#fff}.brand img{filter:grayscale(1)}
.header nav a{border-radius:2px 5px 3px 4px}.header nav a.active{background:#fff;border:1.5px solid #222;box-shadow:3px 3px 0 #222;transform:rotate(-1deg)}
.button{background:#222;border:2px solid #222;border-radius:3px 6px 2px 5px;box-shadow:4px 4px 0 #aaa;transition:transform .15s,box-shadow .15s}
.button:hover{background:#222;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #999}.button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #999}
.home-hero{position:relative;padding-block:78px 82px;gap:48px}
.eyebrow{width:fit-content;padding:7px 11px;background:#fff;border:1px solid #333;border-radius:2px 5px 2px 3px;box-shadow:2px 2px 0 #b3b3b3;transform:rotate(-1deg)}
.studio-heading>.eyebrow{margin-inline:auto}.dot{width:6px;height:6px;transform:rotate(12deg)}
.home-hero h1 .serif-accent,.manifesto-hero .serif-accent{display:inline-block;isolation:isolate}
.home-hero h1 .serif-accent:after,.manifesto-hero .serif-accent:after{content:'';position:absolute;z-index:-1;left:-5px;right:-8px;bottom:3px;height:15px;background:#cfcfcf;clip-path:polygon(0 12%,98% 0,100% 85%,3% 100%);transform:rotate(-2deg)}
.home-hero:after{content:'';position:absolute;left:36%;top:80px;width:135px;height:65px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 70' fill='none'%3E%3Cpath d='M5 49C36 6 72 12 111 39M8 53C38 12 74 17 110 42M101 23l15 21-28 4' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none;transform:rotate(7deg)}
.hero-art{position:relative;isolation:isolate}.hero-art:before{content:'';position:absolute;inset:14px -10px -12px 10px;background:#bdbdbd;border:2px solid #222;transform:rotate(1.2deg);z-index:-1;border-radius:4px 2px 6px 3px}
.hero-art:after{content:'';position:absolute;top:-13px;left:42%;width:85px;height:25px;background:#dededeeF;border:1px solid #aaa;transform:rotate(-5deg);pointer-events:none;clip-path:polygon(0 10%,7% 0,15% 9%,25% 0,36% 8%,47% 0,58% 8%,72% 0,84% 8%,100% 0,96% 100%,82% 93%,68% 100%,53% 93%,38% 100%,22% 93%,8% 100%)}
.software-shot{border:2px solid #252525;border-radius:4px 2px 5px 3px;box-shadow:6px 6px 0 #b7b7b7;overflow:hidden}.hero-art .software-shot{box-shadow:5px 5px 0 #222}
.software-shot figcaption{background:#fff;border-top:1.5px solid #333}.screenshot-expand{border:1px solid #fff;border-radius:2px 5px 2px 3px;box-shadow:2px 2px 0 #111}
.capability-strip{background:#dedede;border-top:2px solid #222;border-bottom:2px solid #222}.capability-strip b{background:#fff;padding:8px 14px;border:1px solid #333;box-shadow:2px 2px 0 #999;transform:rotate(-2deg)}.capability-strip b:nth-of-type(even){transform:rotate(2deg)}
.section-heading h2,.page-hero-row h1,.feature-copy h2{letter-spacing:-1px}.section-number{border:1px solid #333;padding:5px 9px;background:#fff;box-shadow:2px 2px 0 #aaa;transform:rotate(-4deg)}
.value-grid{gap:25px}.value-grid article,.value-grid article:last-child,.extension-types article{border:2px solid #222;border-radius:3px 7px 2px 5px;box-shadow:5px 5px 0 #aaa;position:relative}.value-grid article:nth-child(2){transform:rotate(.5deg)}.value-grid article:nth-child(3){transform:rotate(-.5deg)}
.value-icon svg{stroke-width:1.5}.value-grid a,.text-link{border-bottom:2px solid #333}
.extension-intro{border:2px solid #222;background:#e3e3e3;box-shadow:7px 7px 0 #aaa;border-radius:4px 2px 6px 3px}
.extension-package{border:2px solid #222;box-shadow:8px 8px 0 #222;transform:rotate(1.5deg);border-radius:2px 5px 3px 2px;position:relative}.extension-package:before{content:'';position:absolute;right:22px;top:-12px;width:66px;height:24px;background:#ccc;border:1px solid #888;transform:rotate(7deg)}
.extension-package i,.future-methods span{border-radius:2px 5px 2px 3px;border-width:1.5px}.extension-package b span{font-weight:700}
.studio-section,.principles,.quote-band,.closing,.last-word{background:#dedede;border-block:2px solid #333;position:relative}
.closing:before,.quote-band:before{content:'';position:absolute;top:-9px;left:0;right:0;height:16px;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 40%,97% 75%,93% 40%,88% 85%,82% 35%,75% 80%,69% 40%,61% 90%,54% 35%,46% 80%,38% 40%,31% 90%,22% 35%,15% 80%,8% 45%,0 90%);pointer-events:none}
.scenario-mini,.story-visual,.philosophy-art>img{border:2px solid #222;border-radius:3px 6px 2px 5px;box-shadow:6px 6px 0 #aaa}
.scenario-mini .landscape,.scenario-mini .product-art,.story-visual .landscape,.story-visual .product-art,.philosophy-art>img{filter:grayscale(1)}
.scenario-mini:nth-child(2){transform:rotate(-1deg)}.story-example{border-left:2px solid #333;background:#fff;padding:10px 15px}
.filter-bar button,.feature-jump a,.idea-examples button,.visual-tabs button,.pathway-tabs button,.method-tabs button{border-width:1.5px;border-color:#333;border-radius:3px 5px 2px 4px;box-shadow:3px 3px 0 #b3b3b3}
.filter-bar button.active,.filter-bar button[aria-pressed=true],.visual-tabs button[aria-selected=true],.pathway-tabs button[aria-selected=true]{background:#222;color:#fff;border-color:#222;box-shadow:3px 3px 0 #999;transform:rotate(-1deg)}
.demo-panel,.start-main,.start-aside,.honest-note{border:2px solid #222;box-shadow:6px 6px 0 #aaa;border-radius:4px 2px 7px 3px}.demo-tabs{border:1.5px solid #333;background:#ddd}.demo-tabs button.active{background:#222;color:#fff;border:1px solid #222;box-shadow:2px 2px 0 #888}
.demo-context,.demo-script,.revision-feedback{border:1px dashed #888}.demo-frame{border:1px solid #333;box-shadow:3px 3px 0 #aaa}.demo-frame .landscape,.demo-frame .product-art{filter:grayscale(1)}
.extension-future{background:#222;border:2px solid #111;box-shadow:8px 8px 0 #aaa;border-radius:3px 6px 2px 5px}.method-explorer{border:1.5px solid #aaa}.method-flow>div{border:1.5px solid #bbb;border-radius:4px 2px 5px 3px}.method-flow .method-file{background:#fff;color:#222;box-shadow:4px 4px 0 #999;transform:rotate(-1deg)}.method-file strong,.method-file span{color:#222}
.extension-boundary,.pathway-note{border:1px dashed #777;border-left:3px solid #222;background:#e5e5e5}.screenshot-guide li:before{border:1.5px solid #333;border-radius:3px 5px 2px 4px;box-shadow:2px 2px 0 #aaa;background:#fff}
.faq-list details{border-color:#555}footer{border-top:2px solid #222}.toast{border:1px solid #fff;box-shadow:4px 4px 0 #888}
@media(max-width:1100px){.home-hero:after{left:31%;top:50px;width:105px}.capability-strip{gap:15px}.capability-strip b{padding:7px 10px}}
@media(max-width:800px){.home-hero{padding-block:45px 55px}.home-hero:after{left:auto;right:7%;top:82px;width:105px;transform:rotate(30deg)}.hero-art{margin:10px 8px 0 0}.value-grid article:nth-child(n),.scenario-mini:nth-child(n){transform:none}.header nav{border-bottom:2px solid #222}.extension-package{transform:none}.software-shot{box-shadow:4px 4px 0 #aaa}.capability-strip{gap:12px}.capability-strip b{padding:6px 9px}}
@media(max-width:540px){.home-hero:after{top:75px;width:70px;right:5%}.home-hero h1{font-size:34px}.capability-strip{gap:7px}.capability-strip b{padding:5px 7px;font-size:11px}.value-grid{gap:22px}.extension-intro{margin-bottom:50px}.extension-package{box-shadow:5px 5px 0 #222}.button{box-shadow:3px 3px 0 #aaa}.header nav a.active{transform:none}.eyebrow{font-size:10px}.story-visual{margin-right:6px}}

.portfolio-return{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px max(5.5%,calc((100vw - 1320px)/2));border-bottom:1px solid #aaa;font-size:11px;background:#e7e7e2;color:#555}.portfolio-return a{color:#222}.portfolio-return a:hover{text-decoration:underline}@media(max-width:540px){.portfolio-return{padding:12px 5%;font-size:10px}.portfolio-return span{font-size:9px}}