.concept-guide{color:var(--fg-reading);font-family:var(--font-reading-sans)}.concept-story{max-width:610px;margin:0 0 13px;font-size:15px;line-height:1.7}.concept-guide-tools{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 18px;margin-bottom:32px;display:flex}.concept-route{flex-wrap:wrap;align-items:center;gap:7px;font-size:11px;line-height:1.6;display:flex}.concept-route a{white-space:nowrap;color:var(--fg-graphite);text-decoration:none}.concept-route a:hover{color:var(--fg-ink);text-underline-offset:4px;text-decoration:underline}.concept-route>span{color:var(--illustration-line)}.concept-motion-control{justify-content:flex-end;display:flex}.concept-guide button,.concept-guide input,.concept-guide textarea{font:inherit}.concept-guide button{cursor:pointer}.concept-guide button:focus-visible,.concept-guide input:focus-visible,.concept-guide textarea:focus-visible,.concept-guide a:focus-visible{outline:var(--focus-ring);outline-offset:4px}.concept-motion-control button{color:var(--fg-graphite);background:0 0;border:0;padding:4px 0;font-size:11px}.concept-row{margin-bottom:34px}.concept-heading{margin-bottom:14px}.concept-body{display:flow-root}.concept-heading h2{color:var(--fg-ink);font:400 23px/1.35 var(--font-reading-serif);letter-spacing:-.3px;margin:0;scroll-margin-top:110px}.concept-body>p{margin:0 0 13px;font-size:15px;line-height:1.75}.concept-body>p:last-child{margin-bottom:0}.concept-data-options{margin:0 0 13px;padding-left:22px;font-size:15px;line-height:1.75;list-style:outside}.concept-data-options li+li{margin-top:8px}.concept-data-options strong{font-weight:600}.concept-visual{float:right;width:168px;min-width:0;color:var(--illustration-ink);font-family:var(--font-reading-sans);margin:2px 0 10px 26px;position:relative}.concept-artboard{height:172px;position:relative}.concept-art{transform-origin:100% 0;width:248px;position:absolute;top:0;right:0;transform:scale(.66)}[data-art="1"] .concept-artboard{height:157px}[data-art="2"] .concept-artboard{height:123px}[data-art="3"] .concept-artboard{height:180px}[data-art="4"] .concept-artboard{height:170px}[data-art="5"] .concept-artboard{height:132px}.concept-visual figcaption{color:var(--fg-smoke);text-align:center;margin-top:7px;font-size:10px;line-height:1.5}.concept-options{flex-wrap:wrap;justify-content:center;align-items:center;gap:13px;margin:14px 0 0;display:flex}.concept-options button{color:var(--illustration-muted);background:0 0;border:0;border-bottom:1px solid #0000;padding:3px 0;font-size:10px;transition:color .3s,border-color .3s}.concept-options button[aria-pressed=true]{border-bottom-color:var(--illustration-ink);color:var(--illustration-ink)}.assembly-stage{height:234px;position:relative}.assembly-canvas{transform-origin:top;width:320px;height:350px;margin-left:-160px;position:absolute;top:5px;left:50%;transform:scale(.64)}.assembly-paper{background:var(--illustration-paper);border:1px dashed var(--illustration-line);width:230px;height:330px;margin-left:65px;transition:border-color .7s,transform .7s,box-shadow .7s;position:relative}.sample-section{box-sizing:border-box;border:1px solid var(--illustration-line);background:var(--illustration-fill);padding:13px;transition:transform .85s cubic-bezier(.22,1,.36,1),border-color .6s,background .6s;position:absolute;left:17px;right:17px}.sample-title{background:var(--illustration-fill);z-index:3;height:112px;top:19px}.sample-items{background:var(--illustration-paper);z-index:2;height:92px;top:140px}.sample-summary{background:var(--illustration-fill-strong);z-index:1;height:60px;top:241px}.section-tag{color:var(--illustration-muted);font:11px var(--font-mono);transition:opacity .4s;position:absolute;top:12px;right:calc(100% + 12px)}.sample-brand{font:400 17px var(--font-reading-serif);margin-bottom:15px;display:block}.sample-title>strong{letter-spacing:-.5px;font-size:20px;display:block}.sample-title>small{color:var(--illustration-muted);margin-top:7px;font-size:9px;display:block}.sample-table-value>div{border-bottom:1px solid var(--illustration-line);justify-content:space-between;font-size:9px;line-height:19px;display:flex}.sample-table-value>div:first-of-type{font-size:6px;line-height:12px}.sample-table-value>div:last-child{border:0}.sample-summary>small{letter-spacing:.08em;font-size:7px;display:block}.sample-summary>strong{font-size:21px;line-height:26px;display:block}.sample-binding{position:relative}.sample-expression{white-space:nowrap;color:var(--illustration-muted);font:10px/1.5 var(--font-mono);align-items:center;transition:opacity .45s,transform .45s;display:flex;position:absolute;inset:0}.sample-value,.sample-table-value{opacity:0;transition:opacity .45s}.sample-value{display:block}.sample-table-expression{white-space:pre;color:var(--illustration-muted);font:9px/2 var(--font-mono);transition:opacity .45s,transform .45s;position:absolute;inset:17px 10px}[data-step="2"] .sample-expression,[data-step="3"] .sample-expression,[data-step="2"] .sample-table-expression,[data-step="3"] .sample-table-expression{opacity:0;transform:translateY(-3px)}[data-step="2"] .sample-value,[data-step="3"] .sample-value,[data-step="2"] .sample-table-value,[data-step="3"] .sample-table-value{opacity:1}.sample-footer{color:var(--illustration-muted);justify-content:space-between;font-size:7px;display:flex;position:absolute;bottom:10px;left:20px;right:20px}.pdf-stamp{background:var(--illustration-solid);color:var(--illustration-on-solid);font:10px var(--font-mono);opacity:0;padding:6px 9px;transition:opacity .5s,transform .5s;position:absolute;top:-10px;right:-9px;transform:translateY(6px)}[data-step="0"] .sample-title{transform:translate(-40px,-9px)rotate(-4deg)}[data-step="0"] .sample-items{transform:translate(-62px)rotate(2deg)}[data-step="0"] .sample-summary{transform:translate(-30px,10px)rotate(-3deg)}[data-step="1"] .sample-items{transition-delay:.12s}[data-step="1"] .sample-summary{transition-delay:.24s}[data-step="2"] .sample-title{background:var(--illustration-paper)}[data-step="3"] .assembly-paper{border:1px solid var(--illustration-line);transform:rotate(-2deg);box-shadow:0 7px 18px #00000009}[data-step="3"] .sample-section{background:0 0;border-color:#0000}[data-step="3"] .section-tag{opacity:0}[data-step="3"] .pdf-stamp{opacity:1;transform:translateY(0)}.assembly-steps{gap:12px;margin-top:0}.scope-demo{--scope-tone:var(--illustration-muted)}.visual-source-label{text-align:center;font:10px var(--font-mono);color:var(--illustration-muted);gap:3px;margin-bottom:13px;display:grid}.visual-source-label>span{letter-spacing:50px;color:var(--illustration-line);font:18px var(--font-reading-sans);padding-left:50px}.scope-pages{grid-template-columns:1fr 1fr;gap:16px;padding-inline:8px;display:grid}.scope-paper{background:var(--illustration-paper);border:1px solid var(--illustration-line);box-sizing:border-box;height:154px;padding:13px;position:relative}.scope-paper>b{font:400 11px var(--font-reading-serif);color:var(--scope-tone);transition:color .7s;display:block}.scope-paper>strong{color:var(--scope-tone);margin:13px 0 5px;font-size:13px;transition:color .7s;display:block}.scope-paper>small{color:var(--illustration-muted);font-size:6px;position:absolute;top:15px;right:10px}.scope-lines{gap:6px;margin-top:14px;display:grid}.scope-lines i{background:var(--illustration-line);height:2px}.scope-lines i:nth-child(2){width:84%}.scope-lines i:last-child{width:63%}.scope-total{color:var(--scope-tone);margin:12px -4px 0;padding:6px 4px;transition:color .7s,background .7s}.scope-total small{letter-spacing:.08em;font-size:5px;display:block}.scope-total b{font-size:12px;line-height:22px;display:block}[data-dark=true]{--scope-tone:var(--illustration-ink)}.has-override .scope-paper-second .scope-total{background:var(--illustration-solid);color:var(--illustration-on-solid)}.concept-inline-toggle{color:var(--illustration-muted);border:0;border-bottom:1px solid var(--illustration-line);background:0 0;margin:18px auto 0;padding:3px 0;display:block;font-size:10px!important}.concept-inline-toggle[aria-pressed=true]{color:var(--illustration-ink);border-bottom-color:var(--illustration-ink)}.data-demo{grid-template-columns:106px 18px 124px;align-items:center;row-gap:14px;display:grid}.data-sources{gap:16px;min-width:0;display:grid}.data-sources>div{border-left:1px solid var(--illustration-line);gap:5px;padding-left:9px;display:grid}.data-sources>div>span{color:var(--illustration-muted);gap:3px;font-size:7px;line-height:1.4;display:grid}.data-sources>div>span>b{color:var(--illustration-ink);font:9px var(--font-mono)}.data-sources code{font:8px/1.6 var(--font-mono);color:var(--illustration-ink);overflow-wrap:anywhere}.data-direction{text-align:center;color:var(--illustration-muted);font-size:13px}.data-paper{box-sizing:border-box;border:1px solid var(--illustration-line);background:var(--illustration-paper);width:124px;height:181px;padding:12px;position:relative}.data-paper>b{font:400 11px var(--font-reading-serif);display:block}.data-title{align-items:center;min-height:22px;margin-top:20px;display:grid}.data-title-placeholder,.data-title-value{grid-area:1/1;transition:opacity .6s,transform .6s}.data-title-placeholder{color:var(--illustration-muted);font:8px/1.5 var(--font-mono)}.data-title-value{opacity:0;font-size:15px;transform:translateY(5px)}.data-value{gap:5px;margin-top:14px;display:grid}.data-value small{color:var(--illustration-muted);font-size:5px}.data-placeholder,.data-value>strong{overflow-wrap:anywhere;grid-area:2/1;line-height:1.4;transition:opacity .6s,transform .6s}.data-placeholder{font:8px/1.5 var(--font-mono);color:var(--illustration-muted)}.data-value>strong{opacity:0;font-size:10px;transform:translateY(6px)}[data-filled=true] .data-placeholder,[data-filled=true] .data-title-placeholder{opacity:0;transform:translateY(-5px)}[data-filled=true] .data-value>strong,[data-filled=true] .data-title-value{opacity:1;transform:translateY(0)}.data-lines{gap:6px;margin-top:15px;display:grid}.data-lines i{background:var(--illustration-line);height:2px}.data-lines i:last-child{width:72%}.data-input-label{gap:4px;min-width:0;display:grid}.data-input-label textarea{box-sizing:border-box;resize:none;border:1px solid var(--illustration-line);background:var(--illustration-fill);width:100%;min-width:0;color:var(--illustration-ink);font:8px/1.5 var(--font-mono);border-radius:3px;padding:4px 5px;display:block}.data-input-label textarea:focus{border-color:var(--illustration-muted);background:var(--illustration-paper)}.config-ruler{text-align:center;color:var(--illustration-muted);margin:0 0 13px;font-size:9px;display:block}.config-paper{border:1px solid var(--illustration-line);background:var(--illustration-paper);box-sizing:border-box;width:166px;height:211px;margin:auto;padding:12px;transition:padding .9s cubic-bezier(.22,1,.36,1);position:relative}.config-content{box-sizing:border-box;outline:1px dashed var(--illustration-line);height:100%;padding:10px;overflow:hidden}.config-content>b{font:400 12px var(--font-reading-serif);display:block}.config-content>strong{margin-top:18px;font-size:17px;display:block}.config-content p{color:var(--illustration-muted);margin:12px 0 14px;font-size:9px;line-height:1.6}.config-content i{background:var(--illustration-line);height:2px;margin-top:8px;display:block}.config-content i:last-child{width:70%}[data-inset=true] .config-paper{padding:24px}[data-art="4"]{width:248px}[data-art="4"] .concept-art{width:372px}.break-pages{--gap:14px;--inset:11px;--columns:2;--sheet:114px;grid-template-columns:repeat(var(--columns), var(--sheet));gap:var(--gap);width:max-content;margin:10px auto 0;display:grid;position:relative}.break-paper{background:var(--illustration-paper);border:1px solid var(--illustration-line);height:179px;padding:var(--inset);box-sizing:border-box;position:relative}.break-running{border-bottom:1px solid var(--illustration-line);padding-bottom:8px}.break-running b{font:400 10px var(--font-reading-serif)}.break-rows{gap:9px;margin-top:12px;display:grid}.break-rows>div{color:var(--illustration-muted);align-items:center;gap:7px;font-size:6px;display:flex}.break-rows i{background:var(--illustration-line);width:58%;height:2px}.break-footer{left:var(--inset);right:var(--inset);border-top:1px solid var(--illustration-line);color:var(--illustration-muted);justify-content:space-between;padding-top:5px;font-size:5px;display:flex;position:absolute;bottom:8px}.break-summary{left:var(--inset);width:calc(var(--sheet) - var(--inset) * 2);box-sizing:border-box;background:var(--illustration-fill-strong);border:1px solid var(--illustration-line);clip-path:inset(0 0 22px);height:53px;padding:7px;transition:left .8s cubic-bezier(.22,1,.36,1),top .8s cubic-bezier(.22,1,.36,1),clip-path .5s;position:absolute;top:126px}.break-summary>small{letter-spacing:.08em;font-size:4px;display:block}.break-summary>strong{font-size:14px;line-height:16px;display:block}.break-summary>span{margin-top:4px;font-size:4px;line-height:13px;display:block}.break-summary-tail{top:44px;left:calc(var(--sheet) + var(--gap) + var(--inset));width:calc(var(--sheet) - var(--inset) * 2);box-sizing:border-box;background:var(--illustration-fill-strong);border:1px dashed var(--illustration-line);color:var(--illustration-muted);opacity:1;padding:7px;font-size:5px;transition:opacity .4s;position:absolute}[data-split=true] .break-summary:after,[data-split=true] .break-summary-tail:before{content:"";pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='3' viewBox='0 0 8 3'%3E%3Cpath d='M0 .5 2 2.5 4 .5 6 2.5 8 .5' fill='none' stroke='%23dc4545' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 repeat-x;height:3px;position:absolute;left:-1px;right:-1px}[data-split=true] .break-summary:after{top:28px}[data-split=true] .break-summary-tail{border-top-color:#0000}[data-split=true] .break-summary-tail:before{top:-1px}[data-move=true] .break-summary{left:calc(var(--sheet) + var(--gap) + var(--inset));clip-path:inset(0);top:44px}[data-split=false] .break-summary-tail{opacity:0}.break-next{left:calc(var(--sheet) + var(--gap) + var(--inset));width:calc(var(--sheet) - var(--inset) * 2);box-sizing:border-box;border:1px solid var(--illustration-line);background:var(--illustration-paper);color:var(--illustration-muted);padding:7px;font-size:5px;transition:left .8s,top .8s;position:absolute;top:108px}.break-next i{background:var(--illustration-line);height:2px;margin-top:6px;display:block}.break-next i:last-child{width:70%}[data-mode=auto] .break-next{top:83px}.break-paper-third{display:none}:is([data-mode=after],[data-mode=both]) .break-pages{--columns:3}:is([data-mode=after],[data-mode=both]) .break-paper-third{display:block}:is([data-mode=after],[data-mode=both]) .break-next{left:calc((var(--sheet) + var(--gap)) * 2 + var(--inset));top:44px}.break-demo .concept-options{grid-template-columns:repeat(6,1fr);gap:4px 0;width:248px;margin:18px auto 0;display:grid}.break-demo .concept-options button{grid-column:span 2;justify-self:center}.break-demo .concept-options button:nth-child(4){grid-column:2/span 2}.break-demo .concept-options button:nth-child(5){grid-column:4/span 2}.render-demo{grid-template-columns:104px 20px 104px;align-items:start;gap:6px;padding:8px 4px;display:grid}.render-source,.render-html,.render-result{min-width:0;color:var(--illustration-muted);transition:color .6s;position:relative}.render-source>span,.render-html>span,.render-result>span{font:7px/10px var(--font-mono);color:var(--illustration-muted);margin-bottom:5px;display:block}.render-source code{box-sizing:border-box;border:1px solid var(--illustration-line);background:var(--illustration-paper);height:32px;color:inherit;font:9px var(--font-mono);align-items:center;padding:0 10px;display:flex}.render-input-arrow{text-align:center;height:20px;color:var(--illustration-muted);font:12px/20px var(--font-reading-sans)}.render-html code{box-sizing:border-box;border:1px solid var(--illustration-line);background:var(--illustration-fill);height:94px;color:inherit;font:8px/2 var(--font-mono);padding:20px 10px;display:block}.render-connector{background:var(--illustration-line);align-self:center;height:1px;margin-top:15px;position:relative}.render-connector:after{content:"";border-top:1px solid var(--illustration-line);border-right:1px solid var(--illustration-line);width:4px;height:4px;position:absolute;top:-2px;right:0;transform:rotate(45deg)}.render-result>div{border:1px solid var(--illustration-line);background:var(--illustration-paper);box-sizing:border-box;height:161px;padding:12px;transition:border-color .6s,box-shadow .6s;position:relative}.render-result b{font:400 10px var(--font-reading-serif);display:block}.render-result strong{margin-top:22px;font-size:13px;display:block}.render-result i{background:var(--illustration-line);height:2px;margin-top:10px;display:block}.render-result i:nth-of-type(2){width:75%}.render-result i:nth-of-type(3){width:87%}.render-result small{color:var(--illustration-muted);font-size:5px;position:absolute;bottom:8px;right:10px}[data-phase="0"] .render-source,[data-phase="1"] .render-html{color:var(--illustration-ink)}[data-phase="0"] .render-source code,[data-phase="1"] .render-html code{border-color:var(--illustration-muted)}[data-phase="2"] .render-result{color:var(--illustration-ink)}[data-phase="2"] .render-result>div{border-color:var(--illustration-muted);box-shadow:0 3px 8px #00000006}@media (width<=600px){.concept-row{margin-bottom:30px}.concept-visual{width:138px;margin-left:17px}[data-art="4"]{width:202px}.concept-art{transform:scale(.54)}.concept-artboard{height:141px}[data-art="1"] .concept-artboard{height:130px}[data-art="2"] .concept-artboard{height:102px}[data-art="3"] .concept-artboard{height:149px}[data-art="4"] .concept-artboard{height:140px}[data-art="5"] .concept-artboard{height:108px}.concept-heading h2{font-size:21px}.concept-guide-tools{margin-bottom:26px}}@media (width<=420px){.concept-visual{width:112px;margin-left:14px}[data-art="4"]{width:166px}.concept-art{transform:scale(.44)}.concept-artboard{height:115px}[data-art="1"] .concept-artboard{height:106px}[data-art="2"] .concept-artboard{height:84px}[data-art="3"] .concept-artboard{height:121px}[data-art="4"] .concept-artboard{height:115px}[data-art="5"] .concept-artboard{height:89px}.concept-visual figcaption{font-size:9px}}@media (prefers-reduced-motion:reduce){.concept-guide *,.concept-guide :after{transition:none!important;animation:none!important}}
