/* CSS FIELD NOTES — shared design tokens and demonstrations. */
:root{--paper:#f4f1e9;--ink:#202c27;--muted:#58645d;--line:#cbd0c3;--accent:#d8ed79;--panel:#fffdf7;--orange:#f0a579;--radius:22px;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body.dark{--paper:#17221e;--ink:#f0f2e9;--muted:#b4c1b7;--line:#425348;--panel:#22342b;color-scheme:dark}a{color:inherit;text-underline-offset:5px}button,input,select{font:inherit}button,a,input,summary,select{touch-action:manipulation}:focus-visible{outline:3px solid #b34e24;outline-offset:5px}button{cursor:pointer}.skip{position:absolute;top:-100px;left:20px;padding:10px;background:var(--accent);color:#202c27;z-index:9}.skip:focus{top:12px}.wrap{width:min(1160px,calc(100% - 48px));margin:auto}header{border-bottom:1px solid var(--line)}.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:100px;flex-wrap:wrap;padding-block:20px}.brand{text-decoration:none;font-size:21px;font-weight:800;letter-spacing:-1px}.brand span{display:inline-grid;place-items:center;background:var(--ink);color:var(--paper);border-radius:50%;width:36px;height:36px;margin-right:10px;font-size:18px}nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}nav a{text-decoration:none;font-size:14px}nav a[aria-current=page]{border-bottom:2px solid var(--ink);font-weight:750}.theme{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:50px;padding:8px 14px;font-size:13px}.eyebrow,.label{font:12px/1.5 ui-monospace,monospace;text-transform:uppercase;letter-spacing:2px}.eyebrow{display:flex;align-items:center;gap:10px}.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:#628024}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(46px,7.6vw,96px);letter-spacing:-.065em;line-height:1.02;margin-block:22px 28px;font-weight:650}h1 em{font-family:Georgia,serif;font-weight:400}h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.045em;line-height:1.15}h3{font-size:22px;letter-spacing:-.035em;margin-bottom:12px}.lede{color:var(--muted);max-width:550px;font-size:19px}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center;padding-block:76px}.button{display:inline-flex;gap:24px;align-items:center;background:var(--ink);color:var(--paper);padding:14px 24px;border-radius:50px;text-decoration:none;border:0;font-weight:650;font-size:14px;transition:transform .2s}.button:hover{transform:translateY(-3px)}.hero-art{position:relative;aspect-ratio:1;background:#d8ed79;border-radius:50% 50% 8% 50%;overflow:hidden;isolation:isolate;color:#202c27}.art-grid{position:absolute;inset:0;background-image:linear-gradient(#202c271b 1px,transparent 1px),linear-gradient(90deg,#202c271b 1px,transparent 1px);background-size:36px 36px}.orb{position:absolute;width:58%;aspect-ratio:1;background:repeating-radial-gradient(circle at 50% 50%,#23392d 0 2px,transparent 3px 10px);border-radius:50%;inset:15% auto auto 22%;transform:rotate(-20deg)}.art-chip{position:absolute;background:#fffdf7;padding:10px 18px;border:1px solid #202c27;border-radius:50px;font:13px ui-monospace,monospace;box-shadow:5px 5px 0 #202c27}.chip-a{top:17%;left:6%;transform:rotate(-9deg)}.chip-b{bottom:24%;right:5%;transform:rotate(7deg)}.art-caption{position:absolute;bottom:25px;left:30px;font:12px ui-monospace,monospace}.section{padding-block:48px 64px;border-top:1px solid var(--line)}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:25px;margin-bottom:28px}.section-head h2{margin:0}.muted{color:var(--muted)}.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.tile{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);text-decoration:none;transition:transform .25s,box-shadow .25s}.tile:hover{transform:translateY(-5px);box-shadow:0 16px 24px #152a2312}.tile p{color:var(--muted);font-size:15px}.tile .label{display:block;margin-bottom:24px}.tile-visual{height:120px;margin-bottom:26px;border-radius:12px;display:flex;gap:10px;align-items:center;justify-content:center;background:var(--paper)}.mini-block{background:#739583;border-radius:6px;width:42px;height:62px}.mini-block:nth-child(2){height:85px;background:#d5e77f}.mini-block:nth-child(3){height:48px;background:#f0a579}.rainbow{background:linear-gradient(135deg,#d8ed79,#78b7a2,#a6a3d8)}.mini-ring{width:72px;height:72px;border:2px solid var(--ink);border-radius:50%;box-shadow:12px 0 0 #f0a579}.page-top{padding-block:65px 45px}.page-top h1{font-size:clamp(48px,7vw,80px)}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.demo{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:28px;min-width:0}.stage{min-height:210px;display:grid;place-items:center;border-radius:12px;background:var(--paper);margin-block:20px;overflow:hidden;padding:24px}.demo p{font-size:15px;color:var(--muted)}code{font:13px/1.6 ui-monospace,monospace;background:var(--paper);padding:3px 7px;border-radius:5px;overflow-wrap:anywhere}pre{padding:16px;background:var(--paper);white-space:pre-wrap;border-radius:10px;overflow-wrap:anywhere}pre code{padding:0}.layout-grid{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.layout-grid div{padding:18px;background:#d8ed79;border-radius:8px;color:#202c27;font:14px ui-monospace,monospace}.layout-grid div:first-child{grid-column:span 2;background:#86b4a0}.layout-grid div:last-child{grid-column:span 2;background:#f0a579}.flex-demo{display:flex;flex-wrap:wrap;gap:12px;width:100%}.flex-demo span{flex:1 1 100px;border:1px solid var(--line);border-radius:50px;padding:10px 18px;text-align:center}.flex-demo span:nth-child(2){flex-grow:2;background:#d8ed79;color:#202c27}.columns{columns:2 150px;column-gap:28px;column-rule:1px solid var(--line)}.columns p{margin:0}.container-demo{container-type:inline-size;width:100%;resize:horizontal;overflow:auto;max-width:100%;min-width:140px;border:1px dashed var(--muted);padding:14px}.responsive-card{display:flex;flex-direction:column;gap:10px}.responsive-card strong{display:block}.responsive-card .swatch{background:#f0a579;border-radius:8px;min-height:80px;min-width:80px}.responsive-card p{margin:0}@container (min-width:320px){.responsive-card{flex-direction:row;align-items:center}}.gradient-swatch{width:100%;height:160px;border-radius:12px;background:radial-gradient(circle at 20% 20%,#f5f3bb,transparent 50%),linear-gradient(135deg,#66a78b,#c0b2e2)}.glass-stage{background:conic-gradient(from 45deg,#efb48b,#a7c7a3,#a7afe1,#efb48b)}.glass{padding:30px;background:#ffffff70;border:1px solid #ffffffb0;backdrop-filter:blur(14px);border-radius:16px;color:#202c27;box-shadow:0 10px 32px #183c2325}.clip{width:160px;aspect-ratio:1;background:linear-gradient(30deg,#54846c,#d8ed79);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}.outline-type{font-size:clamp(36px,6vw,65px);font-weight:900;letter-spacing:-4px;color:var(--paper);-webkit-text-stroke:1px var(--ink);text-shadow:4px 4px 0 #e7ab81}.lift{width:135px;aspect-ratio:1;border:0;border-radius:24px;background:#d8ed79;color:#202c27;font-weight:700;box-shadow:0 7px 0 #9bb444;transition:transform .25s,box-shadow .25s}.lift:hover,.lift:focus-visible{transform:translateY(-10px) rotate(-5deg);box-shadow:0 17px 0 #9bb444}.orbit{width:140px;height:140px;border:1px dashed var(--muted);border-radius:50%;position:relative;animation:spin 9s linear infinite}.orbit:after{content:"";position:absolute;top:0;left:50%;width:30px;height:30px;border-radius:50%;background:#d8ed79;box-shadow:0 0 0 8px #a1c48635}.orbit:before{content:"CSS";position:absolute;inset:45px;display:grid;place-items:center;font:13px ui-monospace,monospace;animation:spin 9s linear infinite reverse}.orbit:hover{animation-play-state:paused}@keyframes spin{to{transform:rotate(360deg)}}.bars{display:flex;align-items:center;gap:10px;height:100px}.bars i{width:16px;height:28px;border-radius:20px;background:#799e8b;animation:bounce 1.4s ease-in-out infinite alternate}.bars i:nth-child(2){animation-delay:.2s;background:#d8ed79}.bars i:nth-child(3){animation-delay:.4s;background:#f0a579}.bars i:nth-child(4){animation-delay:.6s}@keyframes bounce{to{height:90px}}body.motion-paused *{animation-play-state:paused!important}.progress-track{width:100%;height:14px;background:var(--line);border-radius:20px;overflow:hidden}.progress-fill{height:100%;width:65%;background:#789a6a;border-radius:inherit;transition:width .5s}input[type=range]{width:100%;accent-color:#69864e}.control-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.component-form{width:100%;display:grid;gap:12px}.component-form label{font-weight:650;font-size:14px}.component-form input,.component-form select{width:100%;padding:11px 14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px}.component-form input:focus{border-color:#719753}.form-feedback{min-height:25px;margin:0!important}.switch-label{display:flex;align-items:center;gap:15px;cursor:pointer}.switch-label input{appearance:none;width:56px;height:32px;background:var(--line);border-radius:30px;position:relative;transition:background .2s;cursor:pointer}.switch-label input:before{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:white;box-shadow:0 2px 4px #0002;transition:transform .2s}.switch-label input:checked{background:#65894e}.switch-label input:checked:before{transform:translateX(24px)}details{border-bottom:1px solid var(--line);padding:16px 0}summary{cursor:pointer;font-weight:650}details p{margin:15px 0 0}.badges{display:flex;gap:12px;flex-wrap:wrap}.badge{font:13px ui-monospace,monospace;border:1px solid var(--line);border-radius:30px;padding:7px 12px}.badge.green{background:#d8ed79;color:#202c27}.badge.orange{background:#f0a579;color:#202c27}.note{border-left:3px solid #809a47;padding:14px 20px;background:var(--panel);margin-block:30px}.motion-toolbar{display:flex;align-items:center;gap:20px;margin-bottom:26px}footer{border-top:1px solid var(--line);padding-block:28px;color:var(--muted);font:13px ui-monospace,monospace}.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.next{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:32px}.next a{font-size:22px;font-weight:650}::selection{background:#d8ed79;color:#202c27}@media(max-width:760px){.wrap{width:calc(100% - 32px)}.hero{grid-template-columns:1fr;gap:35px;padding-block:45px}.hero-art{max-width:440px;width:100%;justify-self:center}.tiles,.two{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column;gap:10px}.nav{gap:16px}nav{gap:15px}.page-top{padding-block:40px 25px}.demo{padding:22px}.section{padding-block:35px}.next{align-items:start;flex-direction:column}.hero .lede{font-size:17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.studio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}.studio-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px}.studio-card a{overflow-wrap:anywhere}.studio-story{max-width:780px;padding-block:28px;border-bottom:1px solid var(--line)}.studio-story p{white-space:pre-line}.status{display:inline-block;font:12px ui-monospace,monospace;border:1px solid var(--line);border-radius:20px;padding:5px 12px}.status-active{background:#d8ed79;color:#202c27}.status-blocked,.status-waiting_for_user{background:#f0a579;color:#202c27}.status-completed{background:#a9d7c3;color:#202c27}.studio-meta{font-size:13px;color:var(--muted)}.studio-hero{padding-block:70px 35px;max-width:900px}.studio-hero h1{font-size:clamp(44px,7vw,86px)}

.studio-card{max-width:580px}.studio-image{margin:24px 0}.studio-image img{display:block;width:100%;height:auto;border-radius:14px;background:var(--paper)}.studio-image a{display:block}.studio-image figcaption{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.55}.image-kind{font-weight:750;color:var(--ink);display:block}.studio-cover{margin:0 0 24px}.studio-cover img{aspect-ratio:16/10;object-fit:cover}.studio-project-cover{max-width:960px}.studio-project-cover .studio-cover img{aspect-ratio:auto;object-fit:contain}.studio-gallery{display:grid;gap:12px}.studio-gallery:empty{display:none}

.studio-feature{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:48px;padding:56px 0 64px}.studio-feature h1{font-size:clamp(48px,6vw,86px);margin-block:20px 24px}.studio-feature .lede{max-width:560px}.studio-feature-art{min-width:0}.studio-feature-art .studio-image{margin:0}.studio-feature-art img{image-rendering:pixelated}.studio-feature-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin:24px 0}.studio-feature-secondary{font-size:14px;font-weight:650}.studio-feature-checkpoint{max-width:560px}.studio-feature .studio-meta{line-height:1.7}@media(max-width:760px){.studio-feature{grid-template-columns:1fr;gap:24px;padding:38px 0}.studio-feature h1{font-size:clamp(44px,11vw,70px)}.studio-feature-art{max-width:550px}.studio-feature-actions{align-items:flex-start;flex-direction:column}}

.collab-hero{padding:64px 0 34px;max-width:900px}.collab-hero h1{font-size:clamp(46px,8vw,92px);letter-spacing:-.055em}.collab-kicker{font:700 12px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#a9d7c3}.collab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;margin:32px 0}.collab-grid>h2{grid-column:1/-1}.collab-card,.collab-update,.collab-final{background:#111827;color:#e5e7eb;border:1px solid #344155;border-radius:18px;padding:24px;margin:18px 0;box-shadow:0 14px 40px #10152216}.collab-card h2{margin:12px 0}.collab-update{max-width:860px}.convo-transcript{white-space:pre-wrap}.collab-card a,.collab-link{color:#a9d7c3}.collab-final{border-color:#72b89a;background:#172923}.collab-final h3{margin-bottom:4px;color:#c6ead8}.collab-muted{color:#a3adc2;font-size:14px}.collab-link{font-weight:700}.collab-feed{margin:45px 0}