:root{font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#222934;background:#f5f7f5;font-synthesis:none;font-size:14px;--ink:#222934;--muted:#6c7882;--line:#e5eaee;--accent:#59ab6e;--green:#59ab6e;--green-dark:#2f7d46}
*{box-sizing:border-box}
body{margin:0}
button,input,select{font:inherit}
button{cursor:pointer}
button,a,input,select{touch-action:manipulation}
button{border:1px solid transparent;background:none;color:inherit}
button:hover{background:#f0f4f1}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #59ab6e;outline-offset:3px}
button:disabled{opacity:.3;cursor:default}
button:disabled:hover{background:none}
.topbar{height:78px;background:#fff;color:var(--ink);display:flex;align-items:center;padding:0 25px;gap:28px;border-bottom:1px solid var(--line);box-shadow:0 4px 18px #22293406;position:relative;z-index:3}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-decoration:none;color:var(--ink);min-width:225px;flex-shrink:0}
.brand-sub{display:block;font-size:10px;line-height:1;letter-spacing:1.25px;color:#596861;font-weight:600}
.project-title{font-size:14px;color:#38424d;flex:1}
.badge{font-size:10px;font-weight:700;letter-spacing:1px;background:#f0f4f1;color:#52665a;border:1px solid #dfe8e2;border-radius:5px;padding:5px 7px;margin-left:10px}
.header-actions{display:flex;align-items:center;gap:8px}
.quiet{color:#38424d;padding:10px 13px;border:1px solid var(--line);border-radius:8px;font-weight:600;background:#fff}
.quiet:hover{background:#f4f9f5;border-color:#9bcaaa;color:#276c3d}
.primary{background:#2f7d46;color:#fff;font-weight:700;padding:11px 17px;border-radius:8px;border:1px solid #2f7d46}
.primary:hover{background:#276c3d;border-color:#276c3d}
.primary span{margin-left:17px}
.app-layout{display:grid;grid-template-columns:235px minmax(340px,1fr) 280px;height:calc(100dvh - 108px);min-height:650px}
.parts-panel,.properties-panel{background:#fff;padding:28px 20px;overflow-y:auto}
.parts-panel{border-right:1px solid var(--line);display:flex;flex-direction:column}
.properties-panel{border-left:1px solid var(--line)}
.panel-eyebrow,.eyebrow{font-size:12px;letter-spacing:1.6px;color:var(--muted);font-weight:600}
.panel-eyebrow{margin-bottom:10px}
h1,h2,p{margin-top:0}
h1{font-size:19px;line-height:1.4;margin-bottom:5px;font-weight:600}
h2{font-size:19px;margin-bottom:7px;font-weight:600}
.subtle{color:var(--muted);font-size:12px;line-height:1.65;margin-bottom:28px}
.section-label{font-size:12px;font-weight:650;letter-spacing:1.3px;margin-bottom:18px;display:flex;justify-content:space-between;color:#6b7883}
.section-label span{color:#6c7882;letter-spacing:0}
.parts-list{margin:0 -10px}
.part-item{display:flex;align-items:center;gap:12px;padding:12px 10px;width:100%;text-align:left;border-radius:5px;margin-bottom:6px;position:relative}
.part-item.selected{background:#edf7ef;color:#276c3d}
.part-item.selected:before{content:"";position:absolute;left:-10px;height:26px;width:3px;background:var(--green-dark);border-radius:0 3px 3px 0}
.part-item svg{width:31px;height:29px;stroke:currentColor;fill:none;stroke-width:1.3;flex-shrink:0}
.part-item span{font-size:14px;line-height:1.5}
.part-item small{display:block;font-size:12px;color:#6c7882;font-variant-numeric:tabular-nums}
.part-item em{margin-left:auto;font-style:normal;font-size:12px;color:#6c7882}
.construction-card{margin-top:32px;padding:18px 14px;border:1px solid #dce9df;border-radius:8px;background:linear-gradient(145deg,#f5faf6,#fff)}
.mini-overline{font-size:12px;letter-spacing:1.4px;color:#6c7882;margin-bottom:13px}
.construction-card strong{font-size:14px;font-weight:600}
.construction-card p{font-size:12px;color:#7b8790;line-height:1.65;margin:8px 0}
.text-button{font-size:12px;color:var(--green-dark);padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.panel-bottom{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:40px;color:#6c7882;font-size:12px;line-height:1.7}
.panel-bottom b{font-weight:400;color:#61717b}
.local-icon{font-size:26px;color:#8da1ad}
.workspace{min-width:0;display:flex;flex-direction:column;overflow:hidden;background:#f2f4f2}
.workspace-toolbar{height:65px;background:#fcfdfc;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 23px;flex-shrink:0}
.view-tabs{display:flex;gap:3px;background:#f0f3f1;padding:4px;border-radius:6px}
.view-tabs button{padding:8px 14px;border-radius:4px;font-size:13px;color:#71808c;white-space:nowrap}
.view-tabs button[aria-selected=true]{background:#fff;box-shadow:0 1px 4px #21342912;color:#276c3d;font-weight:600}
.units{margin-left:auto;font-size:12px;color:#7a8893;margin-right:10px}
.icon-button{font-size:22px;line-height:1;padding:5px 8px;border-radius:4px}
.stage{flex:1;min-height:420px;min-width:0;display:flex;position:relative}
.three-pane{position:relative;flex:1;min-width:0;background:radial-gradient(ellipse at 50% 35%,#fafcfb 0,#f0f4f1 80%);overflow:hidden}
#three-host{position:absolute;inset:0}
#three-host canvas{display:block;width:100%;height:100%;touch-action:none}
.viewport-caption{position:absolute;top:24px;left:28px;z-index:2;pointer-events:none;display:flex;flex-direction:column;gap:7px}
.viewport-caption>span:last-child{font-size:12px;color:#6c7882;font-variant-numeric:tabular-nums}
.view-controls{display:flex;position:absolute;bottom:56px;left:50%;transform:translateX(-50%);background:#ffffffeb;box-shadow:0 3px 15px #22293410;border:1px solid #dfe5e9;border-radius:6px;padding:4px;white-space:nowrap}
.view-controls button{padding:7px 10px;font-size:12px;border-radius:3px}
.view-controls button:first-child{font-weight:650}
.viewport-hint{position:absolute;bottom:21px;left:16px;right:16px;text-align:center;font-size:12px;color:#6c7882;pointer-events:none}
.workspace-bottom{min-height:47px;display:flex;align-items:center;padding:8px 22px;gap:10px;background:#fcfdfc;border-top:1px solid var(--line);font-size:12px;color:#788792;flex-wrap:wrap}
.workspace-bottom>div{display:flex;align-items:center;gap:8px;flex:1}
.status-dot{width:5px;height:5px;border-radius:50%;background:#59ab6e;flex-shrink:0}
.workspace-bottom button{font-size:12px;padding:5px 9px;border:1px solid #d6dee3;border-radius:4px;color:#576f7d;white-space:nowrap}
.workspace-bottom button[aria-pressed=true]{background:#e2f2e7;border-color:#9bcaaa}
.field{margin-bottom:20px}
.field-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.field-top label,.field-label{font-size:14px;color:#56646e}
.number-wrap{display:flex;align-items:center;background:#f7f9f7;border:1px solid #dfe5e9;border-radius:4px;padding-right:7px;min-width:82px}
.number-wrap input{border:0;width:60px;text-align:right;background:transparent;padding:6px 5px;color:#222934;font-size:13px;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.number-wrap input::-webkit-inner-spin-button{appearance:none}
.number-wrap span{font-size:12px;color:#6c7882}
input[type=range]{width:100%;height:3px;accent-color:#2f7d46;cursor:pointer;display:block}
.field-limits{display:flex;justify-content:space-between;color:#738078;font-size:12px;margin-top:8px}
.property-section{border-top:1px solid var(--line);padding-top:23px;margin-top:25px}
.field-label{display:flex;justify-content:space-between;font-size:12px}
.field-label span{color:#6c7882;font-size:12px}
.swatches{display:flex;gap:9px;margin:13px 0 21px}
.swatch{width:27px;height:27px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #e0e5e7}
.swatch[aria-pressed=true]{box-shadow:0 0 0 2px #2f7d46}
.swatch:hover{filter:brightness(1.12)}
.selected-info{background:#edf7ef;padding:13px 14px;border-radius:5px;display:flex;flex-direction:column;gap:6px;color:#4e6857;font-size:12px}
.selected-info strong{font-weight:600;font-size:18px;color:#276c3d;font-variant-numeric:tabular-nums}
.selected-info>span:last-child{font-size:12px}
.technical-note{font-size:12px;line-height:1.65;color:#6c7882;margin:14px 0 0}
.statusbar{display:flex;justify-content:space-between;gap:10px;padding:7px 20px;height:30px;background:#fff;border-top:1px solid var(--line);color:#6c7882;font-size:12px;letter-spacing:.3px}
.pattern-pane{display:none;flex:1;min-width:0;background:#f7f9f7;overflow:auto}
.stage[data-view="2d"] .three-pane{display:none}
.stage[data-view="2d"] .pattern-pane,.stage[data-view=split] .pattern-pane{display:flex;flex-direction:column}
.stage[data-view=split] .pattern-pane{border-left:1px solid #d9e2e6}
.pattern-toolbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding:24px}
.pattern-toolbar>div:first-child{display:flex;flex-direction:column;gap:8px}
#pattern-count{font-size:12px;color:#6c7882}
.legend{font-size:12px;display:flex;gap:14px;align-items:center;color:#798791}
.legend span:before{content:"";display:inline-block;width:16px;border-top:1px solid #294e60;margin-right:5px;vertical-align:middle}
.legend .seam-key:before{border-top:1px dashed #b57c4b}
.patterns{padding:0 20px 15px;display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;flex:1}
.pattern-tile{border:1px solid #dce5e9;border-radius:6px;background:#fff;padding:15px;text-align:left;min-height:205px;display:flex;flex-direction:column;align-items:stretch;cursor:pointer}
.pattern-tile:hover{background:#f4faf5}
.pattern-tile.selected{border-color:#59ab6e;box-shadow:0 0 0 1px #59ab6e}
.pattern-tile svg{width:100%;height:140px;flex:1;overflow:visible}
.pattern-tile>div{display:flex;justify-content:space-between;gap:8px;margin-bottom:14px;font-size:12px}
.pattern-tile small{color:#6c7882;font-size:12px}
.pattern-caption{font-size:12px;color:#6c7882;padding:0 25px 15px;line-height:1.6}
.stage[data-view=split] .patterns{grid-template-columns:1fr}
.stage[data-view=split] .viewport-hint{font-size:12px}
.stage[data-view=split] .view-controls button{padding:6px 7px}
.stage[data-view=split] .viewport-caption{left:18px}
dialog{border:1px solid #dbe2e7;border-radius:12px;box-shadow:0 30px 100px #14253545;padding:28px;max-width:520px;width:calc(100% - 32px);color:#334652}
dialog::backdrop{background:#172b4260;backdrop-filter:blur(3px)}
.dialog-heading{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:20px}
.dialog-heading h2{margin-top:8px}
dialog p,dialog li{font-size:14px;line-height:1.7;color:#71828e}
dialog ol{padding-left:21px}
.export-options{display:flex;gap:12px;margin:22px 0}
.export-options button{flex:1;border:1px solid #cbdcd0;border-radius:8px;text-align:left;padding:20px 16px;background:#f5f9f6}
.export-options b{display:block;font-size:24px;color:#276c3d}
.export-options span{font-size:12px;display:block;margin-top:10px;line-height:1.5;color:#718591}
.export-note{font-size:12px;line-height:1.65;background:#faf3e9;color:#987342;padding:15px;border-radius:5px}
#toast{position:fixed;bottom:48px;left:50%;transform:translate(-50%,20px);background:#222934;color:#fff;box-shadow:0 4px 20px #0002;border-radius:7px;padding:13px 22px;opacity:0;transition:.2s;pointer-events:none;max-width:90vw;font-size:14px;z-index:99}
#toast.visible{opacity:1;transform:translate(-50%,0)}
#webgl-error{position:absolute;top:45%;padding:30px;line-height:1.6;color:#7b5653}

@media(min-width:1600px){.app-layout{grid-template-columns:250px minmax(400px,1fr) 310px}
.properties-panel{padding:30px 28px}
}

@media(max-width:1150px){.app-layout{grid-template-columns:210px minmax(290px,1fr) 250px}
.topbar{padding:0 18px;gap:15px}
.brand{min-width:210px}
.parts-panel,.properties-panel{padding-left:16px;padding-right:16px}
.workspace-toolbar{padding:0 12px}
.view-tabs button{padding:8px 9px}
.project-title{display:none}
.header-actions{margin-left:auto}
.patterns{grid-template-columns:1fr}
.stage[data-view=split]{flex-direction:column}
.stage[data-view=split] .three-pane{min-height:330px}
.stage[data-view=split] .pattern-pane{min-height:220px;border-left:0;border-top:1px solid var(--line)}
}

@media(max-width:850px){.app-layout{grid-template-columns:minmax(300px,1fr) 240px}
.parts-panel{display:none}
.brand{min-width:0}
.brand-sub{font-size:10px}
.topbar{height:70px}
.app-layout{height:calc(100dvh - 100px)}
.quiet{padding:9px}
.primary{padding:10px 12px}
.primary span{display:none}
}

@media(max-width:620px){.topbar{padding:15px 14px 12px;height:auto;min-height:114px;gap:14px;flex-wrap:wrap}
.brand{gap:7px}
.brand-sub{display:block;font-size:9px;letter-spacing:.7px}
.header-actions{gap:7px;width:100%;margin:0}
.header-actions .quiet{flex:1}
.header-actions .primary{flex:1.6}
.quiet{font-size:12px;padding:8px 5px}
.primary{font-size:12px;padding:9px 8px}
.app-layout{display:flex;flex-direction:column;height:auto;min-height:0}
.workspace{height:620px;order:0}
.properties-panel{order:1;border-left:0;border-top:1px solid var(--line);overflow:visible;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.properties-panel>.panel-eyebrow,.properties-panel>h2,.properties-panel>.subtle{grid-column:1/-1}
.properties-panel>.property-section{margin-top:0}
.properties-panel>.property-section:last-child{grid-column:1/-1}
.workspace-toolbar{height:57px;padding:0 12px}
.view-tabs button{font-size:12px;padding:8px 10px}
.units{display:none}
.icon-button{font-size:20px}
.workspace-toolbar>.icon-button:first-of-type{margin-left:auto}
.statusbar{height:auto;min-height:30px;font-size:12px;padding:8px 12px}
.statusbar>span:last-child{display:none}
.workspace-bottom{font-size:12px;padding:8px 12px}
.viewport-hint{font-size:12px;line-height:1.5}
.stage[data-view=split] .three-pane{min-height:260px}
.stage[data-view=split] .pattern-pane{min-height:190px}
.patterns{grid-template-columns:repeat(2,minmax(0,1fr))}
.pattern-tile{padding:10px}
.pattern-tile>div{flex-direction:column}
.view-controls{bottom:60px}
.viewport-caption{left:20px}
.export-options{flex-direction:column}
}

.pattern-tile svg{min-height:0;flex:0 0 155px;height:155px}
.pattern-tile{min-height:240px}
.view-tabs button{font-size:14px}
.field-label{font-size:14px}

@media(min-width:621px){.patterns{grid-template-columns:repeat(2,minmax(0,1fr))}
.stage[data-view=split] .patterns{grid-template-columns:1fr}
}

@media(max-width:380px){.properties-panel{padding:18px 14px;gap:0 16px}
.header-actions .quiet{font-size:12px}
}

@media(max-width:620px){.properties-panel{display:block}
.properties-panel>.property-section{margin-top:25px}
.properties-panel .swatches{flex-wrap:wrap}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}


.product-bar{display:flex;align-items:center;gap:14px;padding:9px 25px;min-height:56px;background:#fff;border-bottom:1px solid var(--line)}
.product-bar label{font-size:11px;font-weight:650;letter-spacing:1.5px;color:#6c7882}
.product-bar select{font:inherit;font-weight:600;color:#276c3d;background:#edf7ef;border:1px solid #cbdcd0;padding:8px 34px 8px 12px;border-radius:5px;max-width:230px}
.product-bar>span{font-size:12px;color:#6c7882}
.product-bar select:focus-visible{outline:3px solid #59ab6e;outline-offset:2px}
.app-layout{height:calc(100dvh - 164px)}
.view-controls{flex-wrap:wrap;justify-content:center}
.part-item span{font-size:13px}

@media(max-width:850px){.app-layout{height:calc(100dvh - 156px)}
.product-bar{padding:9px 16px}
.product-bar>span{display:none}
}

@media(max-width:620px){.app-layout{height:auto}
.product-bar{padding:9px 12px}
.product-bar select{max-width:240px}
.view-controls{gap:3px}
.view-controls button{padding:6px 8px}
}


.select-field{display:flex;flex-direction:column;gap:10px;color:#56646e;margin:0 0 20px;font-size:14px}
.select-field select{font:inherit;color:#276c3d;background:#f4f9f5;border:1px solid #cbdcd0;border-radius:5px;padding:9px 6px;width:100%;min-width:0}
.select-field select:focus-visible{outline:3px solid #59ab6e;outline-offset:2px}
.preset-label{font-size:12px;color:#6c7882}
.pocket-hint{font-size:12px;line-height:1.6;color:#6c7882;margin:0 0 20px}
.preset-options{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.preset-options button{padding:5px 8px;background:#f5f9f6;border:1px solid #d6e0e5;border-radius:4px;font-size:12px}
.preset-options button[aria-pressed=true]{background:#e2f2e7;border-color:#59ab6e;color:#276c3d}
.field[hidden],[hidden].stitch-key{display:none}
.legend{flex-wrap:wrap}
.legend .stitch-key:before{border-color:#80506e}
#export-sewing{font-size:12px;background:#edf7ef;color:#276c3d;padding:10px 12px;border-radius:5px}


/* Vlotho brand assets and interaction states. */
.brand img{display:block;width:218px;height:auto;aspect-ratio:482/40;object-fit:contain}

.brand:hover img{opacity:.75}

.brand:focus-visible{border-radius:4px}

.part-item,.view-tabs,.view-controls,.selected-info,.pattern-tile,.number-wrap,.product-bar select,.select-field select{border-radius:8px}

.pattern-tile.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

.number-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px #59ab6e20}

.export-options button:hover{background:#edf7ef;border-color:#59ab6e}

.statusbar>span:first-child{color:#276c3d;font-weight:700;letter-spacing:.8px}

@media(max-width:850px){.brand img{width:200px}
}

@media(max-width:620px){.brand img{width:190px}
.brand{width:100%}
.header-actions button{min-height:38px}
.product-bar select{flex:1;min-width:0}
.product-bar{gap:12px}
.view-tabs{gap:0}
.view-tabs button{padding:8px}
.workspace-toolbar{gap:4px}
}

.property-section[hidden]{display:none}
.swatches{flex-wrap:wrap}
.design-options{display:flex;flex-direction:column;gap:13px;margin-bottom:24px}
.design-options[hidden]{display:none}
.design-options label{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.4;cursor:pointer}
.design-options input{accent-color:#2f7d46;width:16px;height:16px;flex-shrink:0;margin:0}

.photo-section-link{display:inline-flex;align-items:center;gap:8px;color:#356f47;background:#edf5e9;border:1px solid #dce9d7;border-radius:7px;padding:7px 12px;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}.photo-section-link small{font-size:8px;font-weight:500;letter-spacing:.7px}.photo-section-link:hover{background:#e1efdc}

/* Manual workspace navigation. */
.product-bar{flex-wrap:wrap}.product-bar #manual-edit-link{background:#f6f7f2;border-color:#e1e6d9;color:#62714e}
@media(max-width:600px){.product-bar>label{flex-basis:70px}.product-bar>select{flex-basis:200px}.product-bar .photo-section-link{font-size:11px;padding:7px 10px;gap:6px}}

/* Edit the selected construction with its current parameters. */
.current-model-edit{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;font-size:12px;white-space:nowrap;flex-shrink:0}
.current-model-edit svg{flex-shrink:0}
@media(max-width:600px){.product-bar .current-model-edit{width:100%}}

.example-workspace{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 20px;background:#fff6df;color:#594319;font-size:13px;line-height:1.5}
.example-workspace[hidden]{display:none}
.example-workspace a{color:#245f36;font-weight:600;flex-shrink:0}
.export-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){.example-workspace{align-items:flex-start;flex-direction:column;gap:6px}.export-options{grid-template-columns:minmax(0,1fr)}}

.belt-punch-details{grid-column:1/-1;padding:18px;border:1px solid var(--line,#d9e3dd);border-radius:10px;background:#fff;min-width:0}
.belt-punch-details h3{margin:0 0 6px;font-size:15px;color:#2b3d32}
.belt-punch-details p{margin:0 0 16px;font-size:12px;line-height:1.5;color:#65786a}
.belt-punch-fragments{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.belt-punch-fragments figure{margin:0;min-width:0}
.belt-punch-fragments figcaption{font-size:12px;color:#465e50;margin-bottom:8px}
.belt-punch-fragments svg{display:block;width:100%;height:150px;background:#f7faf8;border:1px solid #e0e7e2;border-radius:6px}