/* Browser specimens remain real HTML at each chosen viewport width. */
.web-preview{border:1px solid #b8aeae;background:#e6e0e5;min-width:0;isolation:isolate}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;background:#f1f0e9e6;gap:12px;border-bottom:1px solid #b8aeae}.preview-domain{font:12px/1.5 var(--mono);color:var(--wine);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}.preview-devices{display:flex;gap:4px}.preview-devices button{height:31px;width:31px;border:1px solid #c3bab5;font:12px var(--mono);transition:background .2s,color .2s}.preview-devices button[aria-pressed=true]{background:var(--wine);color:var(--paper);border-color:var(--wine)}.preview-space{height:385px;position:relative;background:radial-gradient(ellipse at 40% 20%,#dbd2e3,#e4e1d8 80%);overflow:hidden}.preview-space iframe{position:absolute;left:12px;top:12px;display:block;transform-origin:top left;border:0;background:#f8f6f0;box-shadow:0 8px 30px #3f25311a}.preview-resizer{display:flex;align-items:center;gap:12px;padding:15px 13px;border-top:1px solid #b8aeae;background:#eeebe4}.preview-resizer label{display:flex;align-items:center;gap:10px;font-size:12px;flex:1;min-width:0}.preview-resizer input{min-width:30px;width:100%;accent-color:var(--wine);cursor:ew-resize}.preview-resizer output{font:12px var(--mono);white-space:nowrap;min-width:56px;text-align:right}.preview-grid-control{border-left:1px solid #c7bbb4;padding:4px 0 4px 10px;font-size:12px}.preview-grid-control[aria-pressed=true]{color:var(--violet);text-decoration:underline;text-underline-offset:5px}.preview-bottomline{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#eeebe4;padding:0 13px 13px;font:12px/1.5 var(--mono);color:var(--muted)}.preview-bottomline button{font-size:12px;padding:0}.preview-dialog{width:min(1420px,calc(100% - 30px));max-height:94svh;padding:0;border:1px solid #a3919e;background:var(--paper);color:var(--wine);overflow:auto}.preview-dialog::backdrop{background:#302533c9;backdrop-filter:blur(8px)}.preview-dialog-top{display:flex;align-items:center;justify-content:space-between;padding:14px 21px;font:12px var(--mono)}.preview-dialog-top button{font:28px/1 var(--sans);width:34px;height:34px}.preview-dialog-mount{padding:0 20px 20px}.preview-dialog .preview-space{height:65svh}.preview-dialog .preview-toolbar{padding:12px 18px}.web-lab-widget{margin-top:33px;border-top:1px solid #b9bba7;padding-top:27px}.web-lab-widget h3{font-size:30px;letter-spacing:-.045em;line-height:1.15;font-weight:500;margin-top:19px}.web-lab-widget>p{font-size:16px;line-height:1.75;color:var(--muted);margin-top:14px}.web-lab-widget .web-preview{margin-top:23px}.web-lab-widget .widget-label{font-size:12px}.web-lab-widget .widget-note{font-size:13px}.web-lab-choice{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.web-lab-choice button{font-size:14px;border:1px solid #a9aa93;padding:9px 12px;transition:background .25s,color .25s}.web-lab-choice button[aria-pressed=true]{background:var(--wine);color:var(--paper);border-color:var(--wine)}.motion-workbench{border:1px solid #b4b59e;margin-top:23px;background:#eeeee2}.motion-sample{min-height:235px;background:radial-gradient(ellipse at 0 50%,#dce2c3,#ebece2);padding:24px;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;position:relative}.motion-toggle{background:var(--wine);color:var(--paper);font-size:14px;padding:11px 17px;display:flex;gap:28px;align-items:center;position:relative;z-index:2}.motion-menu{width:100%;max-width:310px;border:1px solid #b2aa99;background:#f7f5eb;box-shadow:0 12px 30px #54403712;margin-top:13px;transform-origin:top left;opacity:0;transform:translateY(-10px);visibility:hidden}.motion-menu a{display:flex;justify-content:space-between;padding:11px 15px;border-bottom:1px solid #d3cbb9;font-size:14px}.motion-menu a:last-child{border:0}.motion-menu a:hover{background:var(--citron)}.motion-curve{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:19px;border-top:1px solid #b4b59e;align-items:center}.motion-curve svg{width:100%;height:auto;overflow:visible}.motion-curve .curve-grid{stroke:#cac7b5;stroke-width:1;fill:none}.motion-curve .curve-path{stroke:var(--wine);stroke-width:2;fill:none}.motion-curve .curve-dot{fill:var(--violet);stroke:#f1f0e9;stroke-width:2}.motion-curve .curve-axis{font:11px var(--mono);fill:var(--muted)}.motion-curve label{font-size:14px;color:var(--muted);display:block}.motion-curve output{font:22px var(--mono);color:var(--wine);display:block;margin:12px 0}.motion-curve input{width:100%;accent-color:var(--wine);min-height:25px;margin:0}.motion-caption{padding:0 19px 18px;font-size:13px;line-height:1.65;color:var(--muted);min-height:60px}.motion-source{border-top:1px solid #b4b59e;padding:0 19px}.motion-source summary{font-size:13px;padding:15px 0;cursor:pointer}.motion-source code{display:block;font:12px/1.8 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--wine);padding:5px 0 18px}.motion-source button{font-size:13px;border-bottom:1px solid #a59a83;padding:6px 0;margin-bottom:14px}.motion-feedback{font-size:12px;line-height:1.6;padding-bottom:12px;color:var(--muted)}.project-entry{background:radial-gradient(ellipse at 100% 40%,#dcd3e1aa,transparent 72%),var(--paper)}.project-entry .entry-intro{font-size:17px;color:var(--muted);line-height:1.8}.entry-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:25px}.entry-options button{padding:17px 14px;min-height:104px;border:1px solid #bfb3bb;display:flex;flex-direction:column;justify-content:space-between;gap:20px;text-align:left;font-size:15px;line-height:1.3;transition:background .3s,color .3s}.entry-options button>span{font:12px var(--mono);color:var(--muted)}.entry-options button[aria-pressed=true]{background:var(--wine);color:var(--paper);border-color:var(--wine)}.entry-options button[aria-pressed=true]>span{color:#d6c6d1}.entry-answer{display:flex;gap:15px;padding-top:20px;margin-top:22px;border-top:1px solid #beb2b7;font-size:14px;line-height:1.7;color:var(--muted);min-height:91px}.entry-answer>span{font-size:24px;color:var(--wine);line-height:1.3}.entry-pieces{display:flex;gap:5px;margin-top:20px}.entry-pieces i{height:5px;background:var(--wine);flex:1;opacity:.2;transition:opacity .3s,flex .3s}.entry-pieces i:first-child{opacity:1;flex:2}.entry-pieces i:nth-child(3){background:var(--violet);opacity:.6}.project-entry .button{width:100%;margin-top:23px}.project-entry .entry-note{font-size:12px;line-height:1.7;color:var(--muted);margin-top:15px}.brief-import{margin:25px 0;padding:20px;border:1px solid #aaa58b;background:#e5ed9f55}.brief-import h3{font-size:20px;line-height:1.3;font-weight:500}.brief-import p{font-size:14px;line-height:1.7;color:var(--muted);margin-top:10px}.brief-import button{font-size:14px;margin-top:15px;padding:8px 0;border-bottom:1px solid #8e9270}.brief-import details{margin-top:15px;font-size:13px}.brief-import pre{font:12px/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow:auto}.nav-project{color:var(--wine);font-weight:500}
@media(max-width:980px){.preview-domain{font-size:11px}.preview-resizer{flex-wrap:wrap}.preview-resizer label{flex-basis:100%}.preview-grid-control{padding-left:0;border:0}.preview-space{height:340px}.preview-bottomline{font-size:11px}.preview-bottomline button{font-size:12px}}
@media(max-width:680px){.preview-space{height:370px}.preview-domain{font-size:12px}.preview-resizer{gap:8px}.preview-resizer label{font-size:12px;gap:10px}.preview-resizer label input{min-width:35px}.preview-dialog-mount{padding:0 10px 10px}.preview-dialog .preview-space{height:59svh}.web-lab-widget h3{font-size:29px}.motion-sample{padding:20px;min-height:240px}.motion-curve{gap:20px;padding:20px}.entry-options button{font-size:15px;padding:15px;min-height:105px}.site-header nav .nav-project{display:inline!important}.site-header nav .contact-link{display:none}.site-header nav{gap:17px}.web-lab-widget .widget-label{font-size:12px}.preview-bottomline{font-size:11px}}
@media(prefers-reduced-motion:reduce){.motion-menu{transform:none!important}.entry-options button,.preview-devices button{transition:none}}