:root{--bg-primary: #f0f0f0;--surface: #f4f4f3;--surface-hi: #ffffff;--text-primary: #2a2a2a;--text-secondary: #5c5c5c;--accent: #1f1f1f;--border: rgba(42, 42, 42, .14);--pt-blue: #77cfe7;--pt-mint: #84d7b4;--pt-green: #00ad83;--pt-line: linear-gradient(90deg, var(--pt-blue) 0%, var(--pt-mint) 42%, var(--pt-green) 100%);--neu-shadow: rgba(28, 28, 30, .1);--neu-shadow-lo: rgba(28, 28, 30, .055);--neu-1: 6px 6px 14px var(--neu-shadow-lo), -5px -5px 12px rgba(255, 255, 255, .92);--neu-2: 12px 14px 30px var(--neu-shadow), -8px -8px 20px rgba(255, 255, 255, .95);--neu-inset: inset 3px 3px 7px var(--neu-shadow), inset -3px -3px 7px rgba(255, 255, 255, .95);--glass-bg: rgba(244, 244, 243, .6);--glass-border: rgba(255, 255, 255, .55);--r-sm: 10px;--r-md: 18px;--r-lg: 26px;--r-pill: 999px;--ease-lift: cubic-bezier(.22, 1.12, .36, 1);--font-jp: "Noto Sans JP", sans-serif;--font-display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;--font-mono: "Space Mono", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-jp);color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased;overflow:hidden}.demo-root{position:relative;width:100%;height:100%}.viewer-canvas{position:absolute!important;top:0;right:0;bottom:0;left:0;touch-action:none}.label-mono{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}.topbar{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;pointer-events:none}.topbar-left{display:flex;align-items:center;gap:12px}.badge{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--neu-1)}.for-company{font-family:var(--font-display);font-size:13px;font-weight:500;letter-spacing:.02em}.credit{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--text-secondary)}.panel{position:absolute;z-index:12;right:20px;top:74px;width:340px;max-height:calc(100% - 108px);overflow-y:auto;padding:24px 24px 22px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--neu-2);scrollbar-width:thin}.panel::-webkit-scrollbar{width:3px}.panel::-webkit-scrollbar-thumb{background:#2a2a2a33}.panel-head{margin-bottom:16px}.panel-head h2{font-family:var(--font-display);font-size:17px;font-weight:500;margin-top:5px;letter-spacing:.01em}.product-tabs{display:flex;gap:4px;margin-bottom:4px;padding:4px;border-radius:var(--r-pill);background:#efeeec;box-shadow:var(--neu-inset)}.product-tab{position:relative;flex:1;padding:9px 10px 10px;font-family:var(--font-jp);font-size:12.5px;letter-spacing:.02em;background:transparent;border:none;border-radius:var(--r-pill);cursor:pointer;color:var(--text-secondary);transition:background .2s var(--ease-lift),color .2s var(--ease-lift)}.product-tab.active{background:var(--surface-hi);box-shadow:var(--neu-1);color:var(--text-primary);font-weight:500}.product-tab.active:after{content:"";position:absolute;left:50%;bottom:4px;width:14px;height:2px;transform:translate(-50%);background:var(--pt-line)}.sub-label{font-size:11px;color:var(--text-secondary);margin:12px 0 7px}.spec-note{font-size:10.5px;line-height:1.7;color:var(--text-secondary);margin:6px 0 8px}.group{padding-top:20px;margin-top:18px;border-top:1px solid var(--border)}.group-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;font-family:var(--font-display);font-size:13px;font-weight:500;letter-spacing:.02em}.group-label .current{font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.04em;color:var(--text-secondary);text-align:right}.swatches{display:flex;flex-wrap:wrap;gap:11px}.swatch{width:32px;height:32px;border:none;border-radius:50%;cursor:pointer;box-shadow:var(--neu-1);transition:transform .24s var(--ease-lift),box-shadow .24s var(--ease-lift)}.swatch:hover{transform:translateY(-2px)}.swatch.active{transform:none;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--pt-green)}.toggle-row{display:flex;gap:8px}.toggle-row.wrap{flex-wrap:wrap}.toggle-row.wrap .toggle{flex:1 1 28%;padding:9px 6px 10px}.toggle{position:relative;flex:1;padding:9px 10px 11px;font-family:var(--font-jp);font-size:11.5px;letter-spacing:.02em;background:var(--surface);border:none;border-radius:var(--r-pill);box-shadow:var(--neu-1);cursor:pointer;color:var(--text-primary);transition:box-shadow .2s var(--ease-lift),transform .2s var(--ease-lift)}.toggle:hover{transform:translateY(-1px)}.toggle.active{box-shadow:var(--neu-inset);transform:none;font-weight:500}.toggle.active:after{content:"";position:absolute;left:50%;bottom:5px;width:12px;height:2px;transform:translate(-50%);background:var(--pt-line)}.slider-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.slider-name{font-size:11px;color:var(--text-secondary);width:26px;flex-shrink:0}.slider-row input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:20px;background:transparent;cursor:pointer}.slider-row input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:var(--r-pill);background:#efeeec;box-shadow:var(--neu-inset)}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-5px;border-radius:50%;background:var(--surface-hi);box-shadow:var(--neu-1),0 0 0 1px #2a2a2a14}.slider-row input[type=range]::-moz-range-track{height:8px;border-radius:var(--r-pill);background:#e6e5e2}.slider-row input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--surface-hi);box-shadow:var(--neu-1)}.slider-val{font-family:var(--font-mono);font-size:13px;letter-spacing:-.01em;width:54px;text-align:right;flex-shrink:0}.check-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11.5px;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.check-row input{accent-color:var(--pt-green)}.cta{display:block;margin-top:22px;padding:13px;border-radius:var(--r-pill);background:var(--accent);color:#f4f4f3;text-align:center;text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.08em;box-shadow:var(--neu-1);transition:transform .2s var(--ease-lift)}.cta:hover{transform:translateY(-2px)}.lp-link{display:block;margin-top:12px;text-align:center;font-size:11px;color:var(--text-secondary);text-decoration:none}.lp-link:hover{color:var(--text-primary)}.expiry{margin-top:14px;font-size:10px;line-height:1.6;text-align:center;color:var(--text-secondary)}.hint{position:absolute;bottom:18px;left:24px;z-index:8;font-size:11px;letter-spacing:.04em;color:var(--text-secondary);pointer-events:none}.dim-label-wrap{pointer-events:none}.dim-label{display:inline-block;padding:4px 9px;border-radius:var(--r-pill);background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-primary);white-space:nowrap;-webkit-user-select:none;user-select:none}.dim-label.sub{font-size:10px;color:var(--pt-green);border-color:#00ad8359}.dim-label.alert{color:#b91c1c;border-color:#b91c1c73}.panel-toggle{display:none}@media (max-width: 900px){.topbar{padding:12px 14px}.panel{right:10px;left:10px;top:auto;bottom:10px;width:auto;max-height:66vh;display:flex;flex-direction:column;border-radius:var(--r-lg);padding:0 18px calc(16px + env(safe-area-inset-bottom,0px));transition:max-height .34s var(--ease-lift)}.panel-toggle{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1;width:100%;padding:16px 2px 14px;background:var(--surface);border:none;border-bottom:1px solid var(--border);cursor:pointer;font-family:var(--font-jp);color:var(--text-primary);-webkit-tap-highlight-color:transparent}.panel-toggle-label{display:flex;align-items:baseline;gap:10px;font-family:var(--font-display);font-size:13px;font-weight:500}.panel-toggle-label .sub{font-family:var(--font-jp);font-size:11px;font-weight:400;color:var(--text-secondary)}.panel-toggle .chevron{width:9px;height:9px;margin-right:6px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(-135deg);transition:transform .3s var(--ease-lift)}.panel.collapsed{max-height:54px;overflow:hidden}.panel.open{overflow-y:auto}.panel.open .chevron{transform:rotate(45deg)}.panel-head{display:none}.group:first-of-type{border-top:none}.hint,.credit{display:none}}