: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:fixed;top:0;right:0;bottom:0;left:0}.viewer-canvas{position:absolute!important;top:0;right:0;bottom:0;left:0;touch-action:none}.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;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)}.label-mono{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}.panel{position:absolute;z-index:12;top:66px;right:20px;width:348px;max-height:calc(100% - 96px);overflow-y:auto;padding:22px 24px 20px;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 h2{margin-top:7px;font-family:var(--font-display);font-size:18px;font-weight:500;letter-spacing:.01em}.group{padding-top:16px;margin-top:16px;border-top:1px solid var(--border)}.group-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;font-family:var(--font-display);font-size:13.5px;font-weight:500;letter-spacing:.02em}.group-label .current{font-family:var(--font-jp);font-size:11px;font-weight:400;color:var(--text-secondary);text-align:right}.spec-note{margin-top:12px;font-size:10.5px;line-height:1.7;color:var(--text-secondary)}.toggle-row{display:flex;gap:8px}.toggle-row.wrap{flex-wrap:wrap}.toggle{position:relative;flex:1;padding:10px 8px 12px;border:none;border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--neu-1);font-family:var(--font-jp);font-size:10.5px;line-height:1.4;letter-spacing:.01em;color:var(--text-primary);cursor:pointer;transition:box-shadow .22s var(--ease-lift),transform .22s 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:14px;height:2px;transform:translate(-50%);background:var(--pt-line)}.toggle-row.wrap .toggle{flex:1 1 calc(50% - 4px);padding:11px 10px 13px;border-radius:var(--r-pill);font-size:11.5px}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}.swatch{width:100%;aspect-ratio:1;border:none;border-radius:50%;cursor:pointer;box-shadow:var(--neu-1),inset 0 0 0 1px #00000017;transition:transform .22s var(--ease-lift),box-shadow .22s var(--ease-lift)}.swatch:hover{transform:translateY(-2px)}.swatch.active{transform:none;box-shadow:var(--neu-1),inset 0 0 0 1px #00000017,0 0 0 2px var(--surface),0 0 0 3.5px var(--pt-green)}.slider-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}.slider-name{flex-shrink:0;width:44px;font-size:11px;letter-spacing:.02em;color:var(--text-secondary)}.slider-row input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;min-width:0;height:22px;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:20px;height:20px;margin-top:-6px;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:20px;height:20px;border:none;border-radius:50%;background:var(--surface-hi);box-shadow:var(--neu-1)}.slider-val{flex-shrink:0;width:56px;font-family:var(--font-mono);font-size:16px;letter-spacing:-.01em;text-align:right}.check-row{display:flex;align-items:center;gap:9px;margin-top:8px;font-size:12px;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.check-row input{width:15px;height:15px;accent-color:var(--pt-green);cursor:pointer}.cta{display:block;margin-top:20px;padding:13px;border-radius:var(--r-pill);background:var(--accent);color:#fff;text-align:center;text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.08em;box-shadow:var(--neu-1);transition:transform .22s var(--ease-lift)}.cta:hover{transform:translateY(-1px)}.lp-link{display:block;margin-top:12px;text-align:center;font-size:11px;letter-spacing:.04em;color:var(--text-secondary);text-decoration:none}.lp-link:hover{color:var(--text-primary)}.expiry{margin-top:16px;font-size:10px;line-height:1.7;text-align:center;color:var(--text-secondary)}.hint{position:absolute;left:24px;bottom:44px;z-index:8;font-size:11px;letter-spacing:.04em;color:var(--text-secondary);pointer-events:none}.credit-line{position:absolute;left:24px;bottom:20px;z-index:8;font-size:11px;line-height:1.6;letter-spacing:.02em;color:var(--text-secondary)}.credit-line a{color:var(--text-primary);text-decoration:underline;text-underline-offset:2px}.panel-toggle{display:none}@media (max-width: 860px){.topbar{padding:12px 14px}.credit{display:none}.panel{right:0;left:0;top:auto;bottom:0;width:100%;max-height:72vh;display:flex;flex-direction:column;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:0 18px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 30px var(--neu-shadow);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:17px 2px 15px;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:55px;overflow:hidden}.panel.open{overflow-y:auto}.panel.open .chevron{transform:rotate(45deg)}.panel-head{display:none}.group:first-of-type{border-top:none}.swatches{grid-template-columns:repeat(6,1fr)}.hint{display:none}.credit-line{left:14px;right:14px;bottom:68px;font-size:10px}}