:root{--bg:#101014;--panel:#16161ceb;--panel-border:#ffffff12;--fg:#f2f0ee;--fg-2:#a9a5a0;--fg-3:#6d6a66;--accent:#ff9d6b;--accent-soft:#ff9d6b24;--goal:#7fd4a8;--goal-soft:#7fd4a824;--radius:14px;font-family:Inter,-apple-system,system-ui,Segoe UI,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg);height:100%;color:var(--fg);overflow:hidden}.layout{flex-direction:row-reverse;height:100dvh;display:flex}.stage{flex:1;position:relative}.stage.fs-fallback{z-index:60;background:var(--bg);height:100dvh;position:fixed;inset:0}.stage-grip{display:none}.stage canvas{display:block}.viewer-controls{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:5;background:#121218b8;border:1px solid #ffffff14;border-radius:14px;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:8px;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #0006}.vc-group{align-items:center;gap:4px;display:flex}.vc-group+.vc-group{border-left:1px solid #ffffff14;padding-left:10px}.viewer-controls button{color:var(--fg-2);cursor:pointer;background:#ffffff0f;border:none;border-radius:9px;min-width:34px;padding:7px 11px;font-size:13px;font-weight:600;transition:all .14s}.viewer-controls button:hover:not(:disabled){color:var(--fg);background:#ffffff1f}.viewer-controls button.on{background:var(--accent);color:#1a120c}.viewer-controls button:disabled{opacity:.6;cursor:default}.vc-group.tones .swatch{border:2px solid #0000;border-radius:50%;width:22px;min-width:22px;height:22px;padding:0;box-shadow:inset 0 0 0 1px #00000040}.vc-group.tones .swatch.on{border-color:var(--fg)}.panel{background:var(--panel);border-right:1px solid var(--panel-border);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#ffffff24 transparent;flex-direction:column;flex-shrink:0;gap:20px;width:320px;padding:28px 22px;display:flex;overflow-y:auto}.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-track{background:0 0}.panel::-webkit-scrollbar-thumb{background:#ffffff1f padding-box content-box;border:2px solid #0000;border-radius:8px;transition:background .15s}.panel:hover::-webkit-scrollbar-thumb{background:#ffffff38 padding-box content-box}.panel::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:content-box}.panel::-webkit-scrollbar-thumb:active{background:var(--accent);background-clip:content-box}.panel-head .head-row{justify-content:space-between;align-items:center;display:flex}.panel-head h1{letter-spacing:-.01em;font-size:19px;font-weight:650}.head-toggles{gap:6px;display:flex}.units-toggle{background:#ffffff0d;border-radius:8px;gap:2px;padding:2px;display:flex}.units-toggle button{color:var(--fg-3);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 9px;font-size:12px;font-weight:600}.units-toggle button.on{color:var(--fg);background:#ffffff1f}.harmar-banner{border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border);flex:none;margin:0 -22px;transition:opacity .15s;display:block;overflow:hidden}.harmar-banner:hover{opacity:.92}.harmar-banner img{width:100%;height:auto;display:block}.goal-insights{border:1px solid var(--panel-border);border-radius:var(--radius);flex-direction:column;gap:10px;padding:14px 16px;display:flex}.gi-head{color:var(--fg-2);justify-content:space-between;align-items:baseline;font-size:13px;display:flex}.gi-head b{color:var(--fg)}.gi-kcal{color:var(--fg-3);font-size:11px}.gi-paces{gap:8px;display:flex}.gi-paces>div{background:#ffffff0a;border-radius:9px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 4px;display:flex}.gi-paces span{color:var(--fg-3);text-transform:uppercase;letter-spacing:.05em;font-size:10px}.gi-paces b{font-variant-numeric:tabular-nums;font-size:14px}.gi-plan{background:#ffffff0a;border-radius:9px;flex-direction:column;gap:8px;padding:10px 11px;display:flex}.gi-plan-activity{flex-direction:column;align-items:stretch;gap:6px;display:flex}.gi-plan-activity>span{color:var(--fg-3);font-size:11px}.gi-plan-activity .seg.small button{flex:1;padding:4px 2px}.gi-plan-rows{flex-direction:column;gap:4px;display:flex}.gi-plan-rows>div{justify-content:space-between;align-items:baseline;font-size:12px;display:flex}.gi-plan-rows span{color:var(--fg-3)}.gi-plan-rows b{font-variant-numeric:tabular-nums;color:var(--fg-2)}.gi-plan-target b{color:var(--goal);font-size:13px}.gi-plan-target em{color:var(--fg-3);font-size:11px;font-style:normal}.gi-plan-note{color:var(--fg-3);margin-top:2px;font-size:10.5px;line-height:1.35}.gi-advice{border-radius:9px;padding:9px 11px;font-size:12px;line-height:1.4}.gi-advice.ok{color:var(--goal);background:var(--goal-soft)}.gi-advice.caution{color:var(--warning);background:#ffd1661a}.gi-advice.warn{color:var(--danger);background:#ff6b6b1a}.panel-head .sub{color:var(--fg-3);margin-top:4px;font-size:13px}.seg{background:#ffffff0d;border-radius:10px;gap:3px;padding:3px;display:flex}.seg button{color:var(--fg-2);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:8px 0;font-size:13px;font-weight:550;transition:all .15s}.seg button.on{color:var(--fg);background:#ffffff1a}.tabs{gap:8px;display:flex}.tab{border:1px solid var(--panel-border);color:var(--fg-2);cursor:pointer;background:0 0;border-radius:10px;flex:1;padding:9px 0;font-size:13px;font-weight:600;transition:all .15s}.tab.current.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.tab.goal.active{background:var(--goal-soft);border-color:var(--goal);color:var(--goal)}.sliders{flex-direction:column;gap:18px;display:flex}.slider-row{display:block}.slider-top{color:var(--fg-2);justify-content:space-between;margin-bottom:8px;font-size:13px;display:flex}.slider-top .val{color:var(--fg);font-variant-numeric:tabular-nums;font-weight:600}.slider-top .val em{color:var(--fg-3);margin-left:3px;font-size:12px;font-style:normal;font-weight:400}input[type=range]{appearance:none;touch-action:pan-y;background:#ffffff1f;border-radius:2px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--fg);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px;transition:transform .12s;box-shadow:0 2px 8px #0006}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider-top .val.muted{color:var(--fg-3);font-weight:500}.parts>summary,.appearance>summary,.timeline>summary{cursor:pointer;color:var(--fg-2);border:1px solid var(--panel-border);-webkit-user-select:none;user-select:none;background:#ffffff0a;border-radius:10px;align-items:center;gap:10px;padding:11px 12px;font-size:13px;font-weight:600;list-style:none;transition:background .15s,color .15s;display:flex}.parts>summary:hover,.appearance>summary:hover,.timeline>summary:hover{color:var(--fg);background:#ffffff14}.parts>summary::-webkit-details-marker{display:none}.appearance>summary::-webkit-details-marker{display:none}.timeline>summary::-webkit-details-marker{display:none}.parts>summary .hint,.appearance>summary .hint,.timeline>summary .hint{color:var(--fg-3);text-align:right;margin-left:auto;font-size:11px;font-weight:400}.parts>summary:after,.appearance>summary:after,.timeline>summary:after{content:"";border-right:1.5px solid var(--fg-3);border-bottom:1.5px solid var(--fg-3);flex-shrink:0;width:7px;height:7px;transition:transform .18s;transform:rotate(-45deg)}.parts[open]>summary:after,.appearance[open]>summary:after,.timeline[open]>summary:after{transform:rotate(45deg)}.parts[open]>summary,.appearance[open]>summary,.timeline[open]>summary{margin-bottom:14px}.slider-row.part .slider-top{margin-bottom:6px}.auto-chip{letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);cursor:pointer;border:1px solid #0000;border-radius:20px;margin-left:8px;padding:1px 7px;font-size:10px;font-weight:600}.auto-chip:hover{border-color:var(--accent)}.row-right{align-items:center;gap:8px;display:inline-flex}.band{letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:2px 6px;font-size:9px;font-weight:700}.band-low{color:#7fb8ff;background:#7fb8ff21}.band-typical{color:var(--goal);background:var(--goal-soft)}.band-high{color:#ffb070;background:#ffb07024}.size-card{border:1px solid var(--panel-border);border-radius:var(--radius);padding:14px 16px}.size-title{color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;font-size:12px}.size-rows{gap:20px;display:flex}.size-rows>div{flex-direction:column;gap:3px;display:flex}.size-rows span{color:var(--fg-3);font-size:11px}.size-rows b{font-variant-numeric:tabular-nums;font-size:14px}.appr-body{flex-direction:column;gap:12px;display:flex}.appr-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.appr-label{color:var(--fg-2);font-size:13px}.appr-right{align-items:center;gap:6px;display:flex}.appr-right.tones{gap:5px}.appr-body input[type=color]{border:1px solid var(--panel-border);cursor:pointer;background:0 0;border-radius:7px;width:26px;height:26px;padding:0}.appr-body input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.appr-body input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}.toggle{border:1px solid var(--panel-border);color:var(--fg-2);cursor:pointer;background:#ffffff0d;border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600}.toggle.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.seg.small{background:#ffffff0d;border-radius:8px;gap:2px;padding:2px;display:flex}.seg.small button{color:var(--fg-3);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:600}.seg.small button.on{color:var(--fg);background:#ffffff1f}.appr-body .swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:22px;height:22px;padding:0;box-shadow:inset 0 0 0 1px #00000040}.appr-body .swatch.on{border-color:var(--fg)}.snap-add{width:100%;margin-bottom:10px}.snap-list{flex-direction:column;gap:6px;list-style:none;display:flex}.snap-list li{align-items:stretch;gap:6px;display:flex}.snap-load{text-align:left;border:1px solid var(--panel-border);cursor:pointer;background:#ffffff0a;border-radius:10px;flex-direction:column;flex:1;gap:2px;padding:8px 12px;display:flex}.snap-load:hover{background:#ffffff14}.snap-date{color:var(--fg);font-size:12px;font-weight:600}.snap-nums{color:var(--fg-3);font-variant-numeric:tabular-nums;font-size:11px}.snap-del{border:1px solid var(--panel-border);color:var(--fg-3);cursor:pointer;background:0 0;border-radius:10px;width:34px;font-size:16px}.snap-del:hover{color:var(--danger);border-color:var(--danger)}.stats{border:1px solid var(--panel-border);border-radius:var(--radius);padding:14px 0;display:flex}.stats>div{flex-direction:column;flex:1;align-items:center;gap:3px;display:flex}.stats b{font-variant-numeric:tabular-nums;font-size:16px;font-weight:650}.stats span{color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em;font-size:11px}.compare-btn{margin-top:-6px}.btn{border:1px solid var(--panel-border);color:var(--fg);cursor:pointer;background:#ffffff0f;border-radius:11px;padding:12px 0;font-size:13.5px;font-weight:600;transition:all .15s}.btn:hover{background:#ffffff1a}.btn.primary{background:var(--accent);border-color:var(--accent);color:#1a120c}.btn.ghost{color:var(--fg-2);background:0 0}.suggest-btn{text-align:left;border:1px solid var(--goal);background:var(--goal-soft);color:var(--goal);align-items:center;gap:11px;margin-top:-6px;padding:11px 14px;display:flex}.suggest-btn:hover{background:#7fd4a833}.suggest-spark{flex-shrink:0;font-size:17px;line-height:1}.suggest-text{flex-direction:column;gap:2px;line-height:1.2;display:flex}.suggest-text em{color:var(--fg-3);font-size:11px;font-style:normal;font-weight:500}@media (width<=720px){.layout{flex-direction:column}.stage{flex:none;height:46dvh}.stage.fs-fallback{height:100dvh!important}.stage-grip{cursor:grab;background:var(--panel);border:none;border-top:1px solid var(--panel-border);touch-action:none;flex:none;justify-content:center;align-items:center;height:30px;display:flex}.stage-grip:before{content:"";background:#ffffff42;border-radius:3px;width:44px;height:5px}.stage-grip:active{cursor:grabbing}.panel{width:100%;min-height:0;max-height:none;padding-bottom:max(16px, env(safe-area-inset-bottom));border-left:none;flex:1}.viewer-controls{scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;gap:8px;max-width:calc(100% - 12px);padding:6px;bottom:8px;overflow-x:auto}.viewer-controls::-webkit-scrollbar{display:none}.viewer-controls button{white-space:nowrap;padding:6px 9px;font-size:12px}.vc-group{flex:none}.layout.viewer-compact .vc-group.tones,.vc-group.tones{display:none}}