*,*:before,*:after{box-sizing:border-box}:root{--color-bg: #f4f6fb;--color-panel: #ffffff;--color-border: rgba(15, 23, 42, .08);--color-text: #1f2937;--color-muted: #6b7280;--color-accent: #1a73e8;--color-accent-dark: #1558c2;--color-danger: #dc3545;--color-danger-dark: #b42a39;--color-input-border: #d9dee8;--shadow-panel: 0 10px 30px rgba(15, 23, 42, .08);--radius-panel: 16px}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:Noto Sans JP,Inter,sans-serif;font-size:14px;line-height:1.6}.app-header{max-width:1180px;margin:0 auto;padding:32px 32px 16px}.app-title{margin:0;font-size:28px;font-weight:700;letter-spacing:.02em}.app-subtitle{margin:8px 0 0;color:var(--color-muted);font-size:15px}.app-main{max-width:1180px;margin:0 auto;padding:0 32px 48px;display:flex;flex-direction:column;gap:24px}.container{display:grid;grid-template-columns:310px 1fr;gap:24px;align-items:start}.panel{background:var(--color-panel);border-radius:var(--radius-panel);border:1px solid var(--color-border);box-shadow:var(--shadow-panel);padding:24px}.panel-left{display:flex;flex-direction:column;gap:24px}.panel-right{display:flex;flex-direction:column;gap:20px}.panel-right #chart{width:100%}.panel-title{font-size:16px;font-weight:600;margin-bottom:12px}.code-title{margin-bottom:20px}.chart-wrapper{background:#fbfcff;border:1px solid var(--color-border);border-radius:12px;padding:24px;min-height:340px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #fffc;position:relative;overflow:hidden}#chart{width:100%;height:100%}#chart svg{max-width:100%;height:auto;overflow:visible}.control-group{display:flex;flex-direction:column;gap:12px;padding:20px;background:#f8faffb3;border:1px solid var(--color-border);border-radius:14px}.accordion{background:#f8faffb3;border:1px solid var(--color-border);border-radius:14px;box-shadow:inset 0 0 0 1px #ffffff80;overflow:hidden}.accordion+.accordion{margin-top:16px}.accordion-header{width:100%;padding:16px 20px;background:none;border:none;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;color:var(--color-text);cursor:pointer}.accordion-header:hover{background:#1a73e814}.accordion-icon{width:12px;height:12px;border-right:2px solid var(--color-muted);border-bottom:2px solid var(--color-muted);transform:rotate(45deg);transition:transform .2s ease,border-color .2s ease}.accordion.is-open .accordion-icon{transform:rotate(225deg);border-color:var(--color-accent)}.accordion-content{padding:0 20px 20px;display:block}.accordion:not(.is-open) .accordion-content{display:none}.accordion-content>*+*{margin-top:16px}.accordion .coordinates-inputs>div{display:flex;flex-direction:column;gap:6px}.accordion .control-label{font-size:11px}.accordion .coordinates-inputs>div{background:none;border:none;padding:0}.section-title{font-size:15px;font-weight:600;margin-bottom:4px}.control-label{font-size:12px;font-weight:600;color:var(--color-muted)}input[type=text],input[type=number],select{width:100%;padding:10px 12px;border:1px solid var(--color-input-border);border-radius:10px;font-size:13px;background:#fdfdff;transition:border-color .2s,box-shadow .2s}input[type=text]:focus,input[type=number]:focus,select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px #1a73e826}input[type=number]::-webkit-inner-spin-button{margin:0}button{padding:10px 14px;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:transform .1s ease,box-shadow .2s ease,background-color .2s ease}button:active{transform:translateY(1px)}.btn-primary{background:var(--color-accent);color:#fff;box-shadow:0 8px 16px #1a73e83d}.btn-primary:hover{background:var(--color-accent-dark)}.btn-secondary{background:#eef2ff;color:#1d4ed8;border:1px solid rgba(59,130,246,.2)}.btn-secondary:hover,.radial-controls button.is-active{background:var(--color-accent);color:#fff;border-color:transparent}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover{background:var(--color-danger-dark)}.preset-buttons{display:flex;flex-direction:column;gap:10px}.preset-buttons button{width:100%;justify-content:flex-start}.direction-controls,.radial-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.radial-controls{display:none}.radial-controls button{width:100%}.coordinates-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.coordinates-display{font-size:12px;color:var(--color-muted);background:#f3f5fb;border:1px solid var(--color-border);border-radius:10px;padding:12px;font-family:Roboto Mono,monospace;line-height:1.5;word-break:break-word}.gradient-preview{width:100%;height:60px;border-radius:12px;border:1px solid var(--color-border);background:linear-gradient(135deg,#0ea5e9,#6366f1);box-shadow:inset 0 0 0 1px #fff3}.stop-item{background:#f9fbff;border:1px solid var(--color-border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px}.stop-header{display:flex;align-items:center;justify-content:space-between}.stop-number{font-weight:600}.color-input-wrapper{display:flex;align-items:center;gap:10px}input[type=color]{width:44px;height:34px;border:1px solid var(--color-input-border);border-radius:8px;padding:0;cursor:pointer;background:transparent}.color-value{flex:1;font-family:Roboto Mono,monospace;font-size:12px}.stop-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.panel-code{display:flex;flex-direction:column;gap:18px}.inline-code-panel{padding:20px;gap:16px}.inline-code-panel .panel-title{margin-bottom:8px}.code-section{display:flex;flex-direction:column;gap:8px}.code-section-title{font-size:13px;font-weight:600;color:var(--color-muted)}.export-code{background:#f8fafc;border:1px solid rgba(148,163,184,.4);border-radius:12px;padding:14px;font-family:Roboto Mono,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:220px;overflow-y:auto}.axis path,.axis line{fill:none;stroke:#d0d6e6;shape-rendering:crispEdges}.axis text{fill:#374151a6;font-size:12px;font-family:Noto Sans JP,sans-serif}.line{stroke:#1f2937;stroke-width:1.8px;fill:none}.lineDots{fill:#1f2937}.bar,.slice{stroke:#0f172a40;stroke-width:.8}@media(max-width:980px){.container{grid-template-columns:1fr}.panel-right{order:-1}.app-main{padding:0 20px 40px}.panel-left{max-height:none}.chart-wrapper{min-height:280px}}