/* Design trial 01: shared craft, native controls, no runtime dependencies. */
:root{--studio-space-1:8px;--studio-space-2:16px;--studio-space-3:24px;--studio-space-4:40px;--studio-motion:160ms;--studio-focus:#8c542e}
h1,h2,h3{text-wrap:balance;overflow-wrap:break-word}
p,li{text-wrap:pretty}
button,a,input,textarea,select,summary{-webkit-tap-highlight-color:#e6c36a55}
:where(button,a,input,textarea,select,summary):focus-visible{outline:3px solid var(--studio-focus);outline-offset:4px}
/* Preview pages and controls must remain readable with enlarged system text. */
button,.button,.cta{white-space:normal;line-height:1.35}
button:not(:disabled),.button,.cta{transition:background-color var(--studio-motion),box-shadow var(--studio-motion)}
button:not(:disabled):active,.button:active,.cta:active{box-shadow:inset 0 0 0 2px #263d3766}
@media(hover:hover){button:not(:disabled):hover,.button:hover,.cta:hover{box-shadow:0 3px 0 #263d3726}}
/* Studio: quieter surfaces, consistent controls, room around the work. */
body.studio-craft main{min-width:0}
.studio-craft h1{line-height:1.12;margin-bottom:12px}
.studio-craft h2{font-size:1.4rem;line-height:1.25;letter-spacing:-.025em}
.studio-craft p,.studio-craft li{line-height:1.65}
.studio-craft #workspace>section{padding:clamp(16px,3vw,28px);margin:24px 0;border-color:#d0d8cc}
.studio-craft #workspace>section:first-child{border-top:4px solid #d9b65e}
.studio-craft #workspace{padding-inline:0}
.studio-craft input:not([type=checkbox]):not([type=radio]),.studio-craft textarea,.studio-craft select{line-height:1.5;min-height:48px}
.studio-craft input:focus-visible,.studio-craft textarea:focus-visible,.studio-craft select:focus-visible{border-color:#315f4e;background:#fff}
.studio-craft textarea{min-height:140px}
.studio-craft .layout-toolbar{box-shadow:none;border:1px solid #c6d0c0;border-left:4px solid #d9b65e}
.studio-craft .layout-toolbar small,.studio-craft .collage-choice small{font-size:.875rem;line-height:1.6}
.studio-craft .app-nav a{min-height:56px;gap:5px}
.studio-craft .app-nav a[aria-current=page]{box-shadow:inset 0 0 0 1px #c5d1bc}
.studio-craft #list>article{border-radius:12px;box-shadow:none}
/* Website: real work is the first evidence after the introduction. */
.proof-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px;align-items:center;padding:40px 0;border-bottom:1px solid var(--line)}
.proof-intro .eyebrow{color:var(--rust);margin-bottom:12px}
.proof-intro h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-1.5px;margin-bottom:16px}
.proof-intro p{max-width:44ch;margin-bottom:0;font-size:15px;color:var(--muted)}
.proof-links{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.proof-link{display:block;text-decoration:none;min-width:0}
.proof-link figure{margin:0;padding:8px 8px 0;background:#fffdf5;border:1px solid var(--line);box-shadow:3px 4px 0 #262d2812}
.proof-link img{width:100%;aspect-ratio:4/5;object-fit:contain;background:#e6e6db}
.proof-link figcaption{padding:12px 4px;font-size:13px;line-height:1.5;font-weight:700}
.proof-link figcaption span{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.proof-link:focus-visible figure{outline:3px solid var(--rust);outline-offset:4px}
@media(hover:hover){.proof-link figure{transition:transform 180ms ease-out}.proof-link:hover figure{transform:translateY(-4px)}}
.feature-walkthrough .walk-copy>p{max-width:58ch}
.feature-walkthrough .dog-says{background:transparent;border-left:3px solid var(--gold);border-radius:0;padding:8px 0 8px 16px;gap:12px}
.feature-walkthrough .dog-says p{font-size:15px;font-weight:500}
.feature-walkthrough .focused-demo img{border-radius:4px;padding:8px;background:#fffdf5;box-shadow:4px 6px 0 #262d2812}
.feature-walkthrough .fold{background:transparent}
@media(max-width:700px){.proof-strip{grid-template-columns:1fr;gap:24px;padding:32px 0}.proof-links{gap:14px}.proof-intro h2{font-size:30px}.proof-link figcaption{font-size:12px}.studio-craft #workspace>section{margin:20px 0}.studio-craft .actions{gap:8px}.studio-craft .actions button{margin:0;flex-basis:150px}}
@media(prefers-reduced-motion:reduce){button,.button,.cta,.proof-link figure{transition:none!important}.proof-link:hover figure{transform:none}}
@media(forced-colors:active){.proof-link figure,.studio-craft .app-nav a[aria-current=page]{border:1px solid CanvasText}.studio-craft .app-nav a[aria-current=page]{outline:2px solid Highlight}}