@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap');

:root{font-family:'DM Sans','Noto Sans JP',sans-serif;color:#1f2420;background:#f7f4ee;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #626af4;outline-offset:3px}button:disabled{cursor:not-allowed}a{color:inherit}.page{max-width:1880px;margin:auto;padding:36px clamp(18px,3vw,48px) 28px}.hero{padding:16px 10px 34px}.eyebrow,.section-heading p,.section-kicker,.workspace-top p,.inspector-head p,.code-title>span,.page-footer,.heading-pill,.mock-intro>p:first-child,.stage-state,.mock-top,.usage article>span{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.14em;font-weight:500}.eyebrow{display:flex;align-items:center;gap:12px;color:#007e69;margin:0 0 13px}.brand-mark{width:20px;height:20px;border:2px solid #006f5d;border-radius:5px;box-shadow:5px 5px 0 #adfa36;display:inline-block;margin-right:4px}.hero h1{font-size:clamp(43px,5.25vw,82px);line-height:1.02;letter-spacing:0;margin:0;font-weight:800}.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:22px}.lead{font-size:clamp(16px,1.5vw,21px);font-weight:700;margin:0;line-height:1.7}.lead strong{color:#626af4}.hero-actions{display:flex;gap:10px;flex-shrink:0}.hero-actions button{border:1px solid #d5d6cf;border-radius:14px;padding:13px 18px;background:#fff;font-weight:800;font-size:12px;min-height:45px;transition:transform .18s,box-shadow .18s}.hero-actions button:last-child{background:#1f2420;color:#fff;border-color:#1f2420}.hero-actions button:hover{transform:translateY(-2px);box-shadow:0 6px 0 #d8ded5}

.builder,.usage{border:1px solid #cbd1c8;border-radius:28px;background:#fffdf9;overflow:hidden;box-shadow:0 12px 40px rgb(41 46 39 / .04)}.section-heading{min-height:100px;display:flex;align-items:center;gap:18px;padding:20px 26px;border-bottom:1px solid #cbd1c8;background:#fffdf9}.section-number{display:grid;place-items:center;width:51px;height:51px;flex:none;border-radius:15px;background:#ff6654;color:#fff;font:800 13px 'DM Mono',monospace}.section-number.blue{background:#626af4}.section-heading p{margin:0 0 5px;color:#007e69}.section-heading h2{font-size:clamp(20px,2vw,28px);line-height:1.25;margin:0;font-weight:800}.heading-pill{margin-left:auto;color:#0f7466;background:#e9f4ee;border-radius:100px;padding:8px 11px;white-space:nowrap}.builder-grid{display:grid;grid-template-columns:minmax(240px,280px) minmax(0,1fr) minmax(310px,360px);align-items:stretch}.controls{border-right:1px solid #cbd1c8;background:#fffdf9}.control-section{padding:24px 22px;border-bottom:1px solid #d9ddd5}.control-section:last-child{border-bottom:0}.section-kicker{color:#007e69;margin:0 0 8px}.control-section h3{font-size:16px;margin:0 0 18px;line-height:1.35}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.option-grid button{min-width:0;min-height:107px;padding:13px 8px;border:1px solid #d0d7cf;border-radius:14px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:3px;transition:transform .18s,border-color .18s,box-shadow .18s}.option-grid button:hover,.motion-options button:hover{transform:translateY(-2px);box-shadow:0 5px 0 #dbe5dc}.option-grid button[aria-pressed=true],.motion-options button[aria-pressed=true]{background:#202420;color:#fff;border-color:#202420}.option-grid b{font-size:13px}.option-grid small{font-size:10px;color:#6e756d;font-weight:700}.option-grid button[aria-pressed=true] small{color:#ced6cc}.option-icon{position:relative;width:34px;height:30px;margin-bottom:7px;display:block}.card-icon i{position:absolute;left:2px;background:#dce5df;border-radius:2px}.card-icon i:first-child{top:1px;width:29px;height:14px}.card-icon i:nth-child(2){top:19px;width:23px;height:4px}.card-icon i:nth-child(3){top:25px;width:15px;height:3px}.list-icon i{position:absolute;left:1px;width:31px;height:6px;border-radius:2px;background:linear-gradient(90deg,#dce5df 0 7px,transparent 7px 10px,#dce5df 10px)}.list-icon i:nth-child(1){top:2px}.list-icon i:nth-child(2){top:12px}.list-icon i:nth-child(3){top:22px}.option-grid button[aria-pressed=true] .option-icon i{background-color:#b5ff34}.option-grid button[aria-pressed=true] .list-icon i{background:linear-gradient(90deg,#b5ff34 0 7px,transparent 7px 10px,#b5ff34 10px)}.motion-options{display:grid;gap:8px}.motion-options button{min-height:42px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:11px;background:#fff;border:1px solid #d0d7cf;font-size:12px;font-weight:800;text-align:left;transition:transform .18s,box-shadow .18s}.motion-icon{width:25px;height:19px;border-radius:5px;background:#e3e8e3;display:block}.shimmer-icon{background:linear-gradient(100deg,#dce6e0 20%,#fff 50%,#dce6e0 80%);background-size:200% 100%}.pulse-icon{background:#a4b2ab}.none-icon{background:#dce6e0}.motion-options button[aria-pressed=true] .motion-icon{box-shadow:inset 0 0 0 2px #b5ff34}.control-hint{font-size:10px;color:#5d685f;line-height:1.7;font-weight:600;margin:11px 0 0}.range-fields{display:grid;gap:17px}.range-fields label{display:block}.range-fields label>span{display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:800}.range-fields output{font-family:'DM Mono',monospace;color:#626af4}.range-fields input{width:100%;accent-color:#626af4;margin:11px 0 0}.color-field{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;font-size:11px;font-weight:800}.color-field>div{display:flex;align-items:center;gap:8px}.color-field input{width:34px;height:34px;padding:3px;border-radius:10px;border:1px solid #d5dbd4;background:#fff}.color-field output{font:500 10px 'DM Mono',monospace;color:#66716b;min-width:57px}

.workspace{min-width:0;background:#e9efeb;display:flex;flex-direction:column}.workspace-top{padding:24px 26px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px}.workspace-top p{margin:0 0 5px;color:#007e69}.workspace-top h3{font-size:19px;margin:0}.workspace-top>span{font:700 10px 'DM Mono',monospace;background:#087e6c;color:#fff;padding:8px 11px;border-radius:100px}.preview-stage{margin:0 22px;background:#f8faf7;border:1px solid #cbd5ce;border-radius:19px;padding:18px;min-height:610px;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(#d9e2da 1px,transparent 1px),linear-gradient(90deg,#d9e2da 1px,transparent 1px);background-size:24px 24px}.mock-browser{width:100%;max-width:830px;background:#fffdf9;border:2px solid #242a25;border-radius:19px;box-shadow:9px 11px 0 rgb(27 41 34 / .14);overflow:hidden}.mock-top{height:45px;background:#eef0eb;border-bottom:2px solid #242a25;display:flex;align-items:center;gap:12px;padding:0 15px;color:#68736b;letter-spacing:0;font-size:10px}.window-dots{display:flex;gap:5px}.window-dots i{width:7px;height:7px;border-radius:50%;background:#ff6654}.window-dots i:nth-child(2){background:#ffd56a}.window-dots i:nth-child(3){background:#48c3a5}.stage-state{margin-left:auto;color:#126f5e;background:#d8f2e7;padding:6px 9px;border-radius:100px;font-size:9px}.stage-state.is-ready{color:#171d16;background:#b5ff34}.mock-content{padding:28px clamp(16px,2vw,32px) 32px}.mock-intro{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:18px}.mock-intro>p:first-child{width:100%;color:#087e6c;margin:0}.mock-intro>p:first-child span{color:#75827a;margin-left:10px}.mock-intro h4{font-size:clamp(22px,2.2vw,32px);line-height:1;margin:0;font-weight:800}.mock-intro>p:last-child{font-size:11px;margin:0;color:#69736d;font-weight:700}#previewMount{min-height:350px}.workspace-actions{padding:20px 22px 12px;display:flex;align-items:center;gap:15px}.play-button{min-height:46px;background:#b5ff34;border:2px solid #222820;border-radius:12px;box-shadow:0 5px 0 #222820;padding:0 18px;font-size:12px;font-weight:900;white-space:nowrap;transition:transform .16s,box-shadow .16s}.play-button:hover{transform:translateY(-2px);box-shadow:0 7px 0 #222820}.play-button:active{transform:translateY(4px);box-shadow:0 1px 0 #222820}.play-button span{font-size:19px;vertical-align:-1px}.workspace-actions p{color:#5d6d63;font-size:10px;font-weight:700;line-height:1.5;margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.inspector{min-width:0;background:#242722;color:#f8faf4;border-left:1px solid #181c18;display:flex;flex-direction:column}.inspector-head{padding:26px 23px 19px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start;border-bottom:1px solid #454b43}.inspector-head p{color:#aab9ad;margin:0 0 7px}.inspector-head h3{font-size:18px;margin:0;line-height:1.3}.inspector-head>span{border-radius:100px;background:#b5ff34;color:#1b2414;padding:8px 9px;white-space:nowrap;font:700 9px 'DM Mono',monospace}.inspector-note{padding:18px 23px;border-bottom:1px solid #454b43}.inspector-note b{font-size:12px}.inspector-note p{font-size:11px;color:#b6c4b8;line-height:1.65;margin:7px 0 0}.code-tabs{padding:20px 23px 0;display:flex;gap:5px}.code-tabs button{flex:1;height:39px;border:1px solid #606a60;border-radius:9px;background:#30362e;color:#dce8d7;font:700 11px 'DM Mono',monospace}.code-tabs button:hover{background:#414d3d}.code-tabs button[aria-selected=true]{background:#b5ff34;color:#1e2917;border-color:#b5ff34}.code-title{padding:18px 23px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}.code-title>span{color:#aebcae}.code-title button{background:#fff;color:#1d241b;border:0;padding:8px 9px;border-radius:8px;font-size:10px;font-weight:900;white-space:nowrap}.code-title button:hover{background:#b5ff34}.code-block{margin:0 15px;max-height:620px;overflow:auto;background:#181c18;border:1px solid #465047;border-radius:13px;padding:18px 14px;color:#d7efc8;font:500 10px/1.65 'DM Mono',monospace;tab-size:2;white-space:pre}.code-footnote{padding:18px 23px;margin:0;color:#aebcae;font-size:10px;line-height:1.7}

.usage{margin-top:22px}.usage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;padding:23px}.usage article{padding:22px;border:1px solid #d7ddd4;border-radius:18px;background:#fff;min-height:156px}.usage article>span{color:#626af4}.usage h3{margin:14px 0 6px;font-size:17px}.usage p{font-size:12px;line-height:1.7;color:#56615a;margin:0}.page-footer{display:flex;justify-content:space-between;gap:16px;padding:25px 4px 0;color:#68746c}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,15px);background:#222820;color:#fff;padding:12px 18px;border-radius:100px;font-size:12px;font-weight:800;box-shadow:0 8px 25px #0003;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100}.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* Loaded content belongs to the demo, not to the exported skeleton CSS. */
.motion-ranges{margin-top:19px}
.easing-control{margin-top:19px}.easing-control>p{font-size:11px;font-weight:800;margin:0 0 9px}.easing-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.easing-options button{min-width:0;min-height:47px;padding:7px 9px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;text-align:left;background:#fff;border:1px solid #d0d7cf;border-radius:11px;transition:transform .18s,box-shadow .18s}.easing-options button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 5px 0 #dbe5dc}.easing-options button[aria-pressed=true]{background:#202420;color:#fff;border-color:#202420}.easing-options button:disabled{opacity:.45}.easing-options code{font:700 12px 'DM Mono',monospace}.easing-options small{font-size:10px;font-weight:700;color:#657167}.easing-options button[aria-pressed=true] small{color:#ced6cc}
.easing-options button:last-child{grid-column:1/-1}
.inspector-head>span{font-size:10px}
@media(max-width:620px){.page .page-footer{font-size:10px}}
.double-icon{background:linear-gradient(90deg,#dce6e0 0 22%,#fff 22% 38%,#dce6e0 38% 55%,#fff 55% 72%,#dce6e0 72%)}
.range-fields input:disabled{opacity:.35;cursor:not-allowed}
#previewMount{container-type:inline-size}
#previewMount .real-card,#previewMount .real-row{border-radius:var(--preview-radius)}
#previewMount .real-thumb{border-radius:var(--preview-block-radius)}
@container(max-width:520px){#previewMount .real-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container(max-width:390px){#previewMount .real-grid{grid-template-columns:1fr}}
.real-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.real-card{min-width:0;background:#fff;border:1px solid #d9dfd7;border-radius:14px;overflow:hidden}.real-image{aspect-ratio:16/9;display:grid;place-items:center;color:#233024;font-size:41px;font-weight:800}.real-card:nth-child(4n+1) .real-image{background:#b8f7da}.real-card:nth-child(4n+2) .real-image{background:#b5bcff}.real-card:nth-child(4n+3) .real-image{background:#ffcfb4}.real-card:nth-child(4n+4) .real-image{background:#ffe594}.real-card-body{padding:13px}.real-card-body>span,.real-row>div>span{font:500 9px 'DM Mono',monospace;color:#00816d}.real-card-body h5,.real-row h5{margin:4px 0 4px;font-size:13px;line-height:1.25}.real-card-body p,.real-row p{margin:0;color:#6f7770;font-size:10px;line-height:1.45}.real-list{display:grid;gap:10px}.real-row{display:flex;align-items:center;gap:15px;padding:10px;border:1px solid #d9dfd7;border-radius:14px;background:#fff;min-height:95px}.real-thumb{width:76px;height:72px;flex:none;border-radius:9px;background:#b8f7da;display:grid;place-items:center;font-size:26px}.real-row:nth-child(4n+2) .real-thumb{background:#b5bcff}.real-row:nth-child(4n+3) .real-thumb{background:#ffcfb4}.real-row:nth-child(4n+4) .real-thumb{background:#ffe594}.real-row>div:last-child{min-width:0}.real-card,.real-row{animation:reveal .34s both}@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.real-card,.real-row{animation:none}}

@media(max-width:1250px){.builder-grid{grid-template-columns:260px minmax(0,1fr)}.inspector{grid-column:1/-1;border-left:0;border-top:1px solid #181c18}.code-block{max-height:370px}.controls{grid-row:1}.workspace{grid-row:1}}@media(max-width:850px){.hero-bottom{align-items:flex-start;flex-direction:column}.builder-grid{grid-template-columns:1fr}.controls{border-right:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-row:auto}.control-section:nth-child(odd){border-right:1px solid #d9ddd5}.control-section:nth-child(-n+2){border-bottom:1px solid #d9ddd5}.workspace{grid-row:auto}.preview-stage{min-height:500px}.inspector{grid-column:auto}.usage-grid{grid-template-columns:1fr}.usage article{min-height:0}}@media(max-width:620px){.page{padding:18px 12px 20px}.hero{padding:15px 5px 25px}.hero h1{font-size:clamp(37px,10vw,56px)}.lead{font-size:15px}.hero-actions{width:100%}.hero-actions button{flex:1;padding:11px 8px}.builder,.usage{border-radius:21px}.section-heading{padding:16px;min-height:84px}.section-number{height:43px;width:43px;border-radius:12px}.section-heading h2{font-size:18px}.heading-pill{display:none}.controls{display:block}.control-section,.control-section:nth-child(odd){border-right:0}.control-section{padding:21px 19px}.option-grid button{min-height:99px}.workspace-top{padding:20px 17px}.workspace-top h3{font-size:17px}.preview-stage{margin:0 10px;min-height:490px;padding:11px}.mock-content{padding:22px 12px}.mock-top{font-size:9px;padding:0 10px}.mock-intro{margin-bottom:15px}.mock-intro h4{font-size:23px}.workspace-actions{align-items:flex-start;flex-direction:column;padding:19px 15px}.play-button{width:100%}.usage-grid{padding:14px}.page-footer{font-size:9px;flex-direction:column}}