.cd-knob,.cd-pipe,.cd-sim{border:1px solid var(--rule);border-radius:var(--radius-xl);box-shadow:var(--shadow-2);background:#fff;margin:32px 0;padding:28px}.cd-knob h4,.cd-pipe h4,.cd-sim h4{font-family:var(--font-display);letter-spacing:-.01em;color:var(--ink-900);margin:0;font-size:18px;font-weight:700}.cd-knob-sub,.cd-pipe-sub,.cd-sim-sub{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--violet-600);margin:6px 0 20px;font-size:11px;font-weight:500}.cd-knob{--cd-accent:#5b3bd4;--cd-radius:50%;--cd-lift:2px;--cd-duration:.2s;--cd-weight:600}.cd-knob-grid{grid-template-columns:minmax(220px,1fr) 1.2fr;align-items:stretch;gap:32px;display:grid}.cd-knob-stage{background:var(--bg-well);border-radius:var(--radius-lg);isolation:isolate;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:220px;padding:40px 24px;display:flex;position:relative;overflow:hidden}.cd-knob-stage:before{content:"";z-index:-1;background:radial-gradient(240px 180px at 30% 30%,#5b3bd414,#0000 70%),radial-gradient(240px 180px at 70% 70%,#e0418b14,#0000 70%);position:absolute;inset:0}.cd-knob-cta{font-family:var(--font-sans);font-size:15px;font-weight:var(--cd-weight);letter-spacing:-.01em;color:#fff;background:var(--cd-accent);border-radius:var(--cd-radius);cursor:pointer;box-shadow:0 2px 8px color-mix(in srgb, var(--cd-accent) 30%, transparent), 0 0 0 0 color-mix(in srgb, var(--cd-accent) 40%, transparent);transition:transform var(--cd-duration) cubic-bezier(.2, .8, .2, 1), box-shadow var(--cd-duration) cubic-bezier(.2, .8, .2, 1), filter var(--cd-duration) cubic-bezier(.2, .8, .2, 1);border:0;padding:14px 26px}.cd-knob-cta:hover{transform:translateY(calc(var(--cd-lift) * -1));filter:brightness(1.08);box-shadow:0 calc(8px + var(--cd-lift)) 24px color-mix(in srgb, var(--cd-accent) 35%, transparent), 0 0 0 4px color-mix(in srgb, var(--cd-accent) 15%, transparent)}.cd-knob-hint{font-family:var(--font-mono);color:var(--ink-500);letter-spacing:.06em;text-transform:uppercase;font-size:11px}.cd-knob-controls{flex-direction:column;gap:18px;display:flex}.cd-knob-field{flex-direction:column;gap:8px;display:flex}.cd-knob-field label{font-family:var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);justify-content:space-between;align-items:baseline;font-size:12px;font-weight:600;display:flex}.cd-knob-field label span{font-family:var(--font-mono);text-transform:none;letter-spacing:0;color:var(--ink-900);font-size:12px;font-weight:500}.cd-knob-field input[type=range]{appearance:none;background:var(--rule);border-radius:999px;outline:none;width:100%;height:4px}.cd-knob-field input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--cd-accent);cursor:pointer;border:2px solid #fff;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #0e111833}.cd-knob-field input[type=range]::-moz-range-thumb{background:var(--cd-accent);cursor:pointer;border:2px solid #fff;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #0e111833}.cd-knob-row{gap:10px;display:flex}.cd-knob-swatch{border:2px solid var(--rule);cursor:pointer;width:32px;height:32px;transition:transform var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);border-radius:999px;padding:0}.cd-knob-swatch:hover{transform:scale(1.08)}.cd-knob-swatch.active{border-color:var(--ink-900);box-shadow:0 0 0 3px #0e111814}.cd-knob-verdict{border-top:1px dashed var(--rule);flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px;padding-top:20px;display:flex}.cd-knob-judge{font-family:var(--font-sans);cursor:pointer;letter-spacing:-.005em;transition:transform var(--dur-micro) var(--ease), filter var(--dur-micro) var(--ease);border:0;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:600}.cd-knob-judge:hover{filter:brightness(1.05);transform:translateY(-1px)}.cd-knob-judge.good{background:var(--success-bg);color:var(--success)}.cd-knob-judge.work{background:var(--warning-bg);color:var(--warning)}.cd-knob-chip{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);background:var(--bg-well);color:var(--ink-700);border-radius:999px;padding:6px 12px;font-size:11px;font-weight:500;transform:translateY(4px)}.cd-knob-chip.show{opacity:1;transform:translateY(0)}.cd-knob-chip.show.good{background:var(--success-bg);color:var(--success)}.cd-knob-chip.show.adjusted{color:var(--violet-600);white-space:normal;text-transform:none;letter-spacing:0;max-width:520px;line-height:1.4;font-family:var(--font-sans);background:linear-gradient(92deg,#5b3bd41f 0%,#e0418b1f 100%);padding:8px 14px;font-size:13px}.cd-knob-judge[disabled]{opacity:.45;cursor:not-allowed}.cd-knob-judge[disabled]:hover{filter:none;transform:none}.cd-knob-comment{background:var(--bg-well);border:1px solid var(--rule);border-radius:var(--radius-lg);animation:cd-knob-fade-in .22s var(--ease);margin-top:18px;padding:18px}@keyframes cd-knob-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.cd-knob-comment label{font-family:var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin-bottom:8px;font-size:11px;font-weight:600;display:block}.cd-knob-comment textarea{width:100%;font-family:var(--font-sans);color:var(--ink-900);border:1px solid var(--rule);border-radius:var(--radius-md);resize:vertical;box-sizing:border-box;transition:border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);background:#fff;outline:none;padding:10px 12px;font-size:14px;line-height:1.5}.cd-knob-comment textarea:focus{border-color:var(--violet-600);box-shadow:0 0 0 3px #5b3bd426}.cd-knob-comment textarea::placeholder{color:var(--ink-300)}.cd-knob-comment-actions{flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;display:flex}.cd-knob-comment-hint{font-family:var(--font-mono);color:var(--ink-500);align-items:center;gap:4px;margin-right:auto;font-size:11px;display:inline-flex}.cd-knob-comment-hint kbd{font-family:var(--font-mono);border:1px solid var(--rule);color:var(--ink-700);background:#fff;border-bottom-width:2px;border-radius:4px;padding:1px 5px;font-size:10px}.cd-knob-ghost{font-family:var(--font-sans);color:var(--ink-700);cursor:pointer;transition:color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);background:0 0;border:0;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:500}.cd-knob-ghost:hover{color:var(--ink-900);background:#0e11180d}.cd-knob-send{font-family:var(--font-sans);cursor:pointer;color:#fff;background:var(--grad-line);box-shadow:var(--shadow-glow);transition:transform var(--dur-micro) var(--ease), filter var(--dur-micro) var(--ease);border:0;border-radius:999px;padding:9px 18px;font-size:13px;font-weight:600}.cd-knob-send:hover{filter:brightness(1.05);transform:translateY(-1px)}.cd-knob-send:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.cd-knob-send:disabled:hover{filter:none;transform:none}.cd-knob-shimmer{pointer-events:none;border-radius:inherit;background:linear-gradient(100deg,#0000 30%,#5b3bd41f 50%,#0000 70%) 0 0/250% 100%;animation:1.2s linear infinite cd-knob-shimmer;position:absolute;inset:0}@keyframes cd-knob-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}.cd-pipe-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:20px;display:flex}.cd-pipe-head h4,.cd-pipe-sub{margin:0}.cd-pipe-track{grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 24px;padding:0;list-style:none;display:grid;position:relative}.cd-pipe-track:before{content:"";background:var(--rule);z-index:0;height:2px;position:absolute;top:22px;left:12%;right:12%}.cd-pipe-track li{z-index:1;position:relative}.cd-pipe-node{cursor:pointer;width:100%;font-family:var(--font-sans);color:var(--ink-500);transition:color var(--dur-micro) var(--ease);background:0 0;border:0;flex-direction:column;align-items:center;gap:10px;padding:0;display:flex}.cd-pipe-num{border:2px solid var(--rule);width:44px;height:44px;font-family:var(--font-mono);color:var(--ink-500);transition:all var(--dur-state) var(--ease);background:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:600;display:flex}.cd-pipe-label{letter-spacing:-.005em;text-align:center;font-size:13px;font-weight:600}.cd-pipe-node:hover .cd-pipe-num{border-color:var(--violet-500);color:var(--violet-600)}.cd-pipe-node.active .cd-pipe-num{border-color:var(--violet-600);background:var(--violet-600);color:#fff;box-shadow:0 0 0 4px #5b3bd41f}.cd-pipe-node.active .cd-pipe-label{color:var(--ink-900)}.cd-pipe-node.sweet.active .cd-pipe-num{background:var(--grad-line);border-color:#0000;box-shadow:0 0 0 4px #e0418b24}.cd-pipe-node.skip.active .cd-pipe-num{background:var(--ink-700);border-color:#0000;box-shadow:0 0 0 4px #0e111814}.cd-pipe-panel{background:var(--bg-well);border-radius:var(--radius-lg);border-left:4px solid var(--violet-500);padding:24px 28px}.cd-pipe-panel.sweet{border-left-color:var(--magenta-500);background:linear-gradient(135deg, #5b3bd40f, #e0418b0f), var(--bg-well)}.cd-pipe-panel.skip{border-left-color:var(--ink-700);background:var(--bg-well)}.cd-pipe-badge{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--violet-600);margin-bottom:8px;font-size:11px;font-weight:500}.cd-pipe-panel.sweet .cd-pipe-badge{background:var(--grad-line);color:#0000;-webkit-background-clip:text;background-clip:text}.cd-pipe-panel.skip .cd-pipe-badge{color:var(--ink-500)}.cd-pipe-panel h5{font-family:var(--font-display);letter-spacing:-.015em;color:var(--ink-900);margin:0 0 10px;font-size:22px;font-weight:700}.cd-pipe-desc{font-family:var(--font-sans);color:var(--ink-700);margin:0 0 10px;font-size:15px;line-height:1.55}.cd-pipe-note{font-family:var(--font-sans);color:var(--ink-900);margin:0;font-size:14px;font-weight:500;line-height:1.55}.cd-sim-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:20px;display:flex}.cd-sim-head h4,.cd-sim-sub{margin:0}.cd-sim-grid{grid-template-columns:repeat(2,1fr);gap:16px 20px;display:grid}.cd-sim-field{flex-direction:column;gap:6px;min-width:0;display:flex}.cd-sim-field label{font-family:var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);font-size:11px;font-weight:600}.cd-sim-field input,.cd-sim-field select{font-family:var(--font-mono);color:var(--ink-900);border:1px solid var(--rule);border-radius:var(--radius-md);transition:border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);box-sizing:border-box;background:#fff;outline:none;width:100%;padding:10px 12px;font-size:15px;font-weight:500}.cd-sim-field input:focus,.cd-sim-field select:focus{border-color:var(--violet-600);box-shadow:0 0 0 3px #5b3bd426}.cd-sim-result{border-radius:var(--radius-lg);background:var(--grad-hero);color:#fff;box-shadow:var(--shadow-3);margin-top:24px;padding:24px 28px 28px;position:relative;overflow:hidden}.cd-sim-result:after{content:"";background:var(--grad-mesh);opacity:.55;mix-blend-mode:screen;pointer-events:none;position:absolute;inset:0}.cd-sim-result>*{z-index:1;position:relative}.cd-sim.over .cd-sim-result{background:linear-gradient(135deg,#4a0e2e 0%,#7c1a4f 40%,#e0418b 100%)}.cd-sim-headline{font-family:var(--font-display);letter-spacing:-.02em;margin-bottom:6px;font-size:26px;font-weight:800;line-height:1.1}.cd-sim-sub-line{font-family:var(--font-sans);color:#ffffffd1;margin-bottom:22px;font-size:15px;line-height:1.45}.cd-sim-bar{background:#ffffff2e;border-radius:999px;width:62.5%;height:10px;margin:0 0 28px;position:relative;overflow:visible}.cd-sim-bar-fill{height:100%;transition:width var(--dur-enter) var(--ease);background:linear-gradient(90deg,#5fe3da 0%,#b7a5ff 60%,#f06aa8 100%);border-radius:999px;max-width:160%}.cd-sim-bar-fill.over{background:linear-gradient(90deg,#f06aa8 0%,#ff4f8f 50%,#ff1f6f 100%)}.cd-sim-bar-mark{background:#fff9;border-radius:1px;width:2px;height:18px;position:absolute;top:-4px;transform:translate(-50%)}.cd-sim-bar-mark span{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#ffffffb3;white-space:nowrap;font-size:10px;font-weight:500;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%)}.cd-sim-dl{grid-template-columns:repeat(2,1fr);gap:18px 32px;margin:0;display:grid}.cd-sim-dl>div{min-width:0}.cd-sim-dl dt{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#ffffffb3;margin:0;font-size:11px;font-weight:500}.cd-sim-dl dd{font-family:var(--font-display);letter-spacing:-.02em;color:#fff;margin:4px 0 0;font-size:22px;font-weight:700}.cd-sim-hint{font-family:var(--font-sans);color:var(--ink-500);margin:18px 0 0;font-size:13px;line-height:1.55}@media (max-width:880px){.cd-knob,.cd-pipe,.cd-sim{padding:22px}.cd-knob-grid{grid-template-columns:1fr}.cd-pipe-track{grid-template-columns:repeat(5,1fr);gap:2px}.cd-pipe-track:before{top:16px;left:8%;right:8%}.cd-pipe-num{width:32px;height:32px;font-size:11px}.cd-pipe-label{font-size:11px}.cd-sim-grid,.cd-sim-dl{grid-template-columns:1fr}.cd-sim-headline{font-size:22px}.cd-sim-bar{width:62.5%}}