:root{--ftc-primary:var(--main-primary);--ftc-text:#1f2937;--ftc-text-muted:#64748b;--ftc-bg:#fff;--ftc-bg-hover:#f8fafc;--ftc-border:#e2e8f0;--ftc-border-hover:#cbd5e1;--ftc-shadow:0 1px 3px #0000000f, 0 1px 2px #0000000a;--ftc-radius:.5rem;--ftc-radius-lg:.75rem;--ftc-slider-track:#e2e8f0;--ftc-slider-thumb:var(--main-primary);--ftc-code-bg:#1e293b;--ftc-code-text:#e2e8f0;--ftc-formula-bg:#f8fafc;--ftc-formula-border:#e2e8f0}._ftc-container{width:100%;padding-left:var(--main-space-4);padding-right:var(--main-space-4)}._ftc-layout{gap:var(--main-space-4);grid-template-columns:1fr 320px;align-items:start;display:grid}._ftc-preview-section,._ftc-controls-section{gap:var(--main-space-3);flex-direction:column;display:flex}._ftc-panel{background:var(--ftc-bg);border-radius:var(--ftc-radius-lg);border-style:solid;border-width:1px;border-color:var(--ftc-border);box-shadow:var(--ftc-shadow);padding:var(--main-space-3)}._ftc-panel-title{color:var(--ftc-text);margin-bottom:var(--main-space-3);font-size:.8125rem;font-weight:600}@media (max-width:860px){._ftc-layout{grid-template-columns:1fr}._ftc-controls-section{order:2}._ftc-preview-section{order:1}}@media (max-width:768px){._ftc-container{padding-left:.75rem;padding-right:.75rem}._ftc-panel{padding:var(--main-space-2)}}@media (max-width:480px){._ftc-container{padding-left:.5rem;padding-right:.5rem}._ftc-layout{gap:var(--main-space-3)}}._ftc-control-row{justify-content:space-between;align-items:center;gap:var(--main-space-2);margin-bottom:var(--main-space-2);display:flex}._ftc-control-row:last-child{margin-bottom:0}._ftc-label{color:var(--ftc-text-muted);white-space:nowrap;min-width:60px;font-size:.8125rem}._ftc-slider-wrap{align-items:center;gap:var(--main-space-2);flex:1;display:flex}._ftc-slider{-webkit-appearance:none;appearance:none;background:var(--ftc-slider-track);cursor:pointer;touch-action:manipulation;border-radius:3px;outline:none;flex:1;min-width:0;height:5px}._ftc-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--ftc-slider-thumb);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0003}._ftc-slider::-moz-range-thumb{background:var(--ftc-slider-thumb);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0003}._ftc-input-wrap{background:var(--ftc-bg);border-style:solid;border-width:1px;border-color:var(--ftc-border);border-radius:var(--ftc-radius);align-items:center;gap:2px;min-width:80px;padding:.25rem .5rem;display:flex}._ftc-input-wrap-sm{min-width:70px}._ftc-input{color:var(--ftc-text);background:0 0;border:none;outline:none;width:100%;font-size:.8125rem}._ftc-input-sm{text-align:center;width:40px;padding:0;font-size:.75rem}._ftc-input-suffix{color:var(--ftc-text-muted);white-space:nowrap;font-size:.6875rem}._ftc-unit-toggle{background:var(--ftc-bg-hover);border-radius:var(--ftc-radius);border-style:solid;border-width:1px;border-color:var(--ftc-border);gap:2px;padding:2px;display:flex}._ftc-unit-btn{border-radius:calc(var(--ftc-radius) - 2px);color:var(--ftc-text-muted);cursor:pointer;background:0 0;border:0 #0000;padding:.25rem .75rem;font-size:.75rem;font-weight:500;transition:all .15s}._ftc-unit-btn.is-active{background:var(--ftc-bg);color:var(--ftc-primary);box-shadow:0 1px 2px #0000000f}._ftc-unit-btn:hover:not(.is-active){color:var(--ftc-text)}@media (max-width:768px){._ftc-control-row{gap:var(--main-space-2)}._ftc-label{min-width:56px;font-size:.8125rem}._ftc-input,._ftc-input-sm{font-size:16px}._ftc-input-sm{width:48px}._ftc-input-wrap{min-width:88px;padding:.375rem .5rem}._ftc-input-wrap-sm{min-width:76px}._ftc-slider{height:6px}._ftc-slider::-webkit-slider-thumb{width:22px;height:22px}._ftc-slider::-moz-range-thumb{width:22px;height:22px}._ftc-unit-btn{min-height:36px;padding:.4rem .875rem;font-size:.8125rem}}@media (max-width:480px){._ftc-control-row{flex-wrap:wrap}._ftc-label{flex:0 0 100%;min-width:0}._ftc-input-wrap{flex:1}._ftc-slider-wrap{flex:0 0 100%;width:100%}}._ftc-preview-card{background:var(--ftc-bg);border-radius:var(--ftc-radius-lg);border-style:solid;border-width:1px;border-color:var(--ftc-border);box-shadow:var(--ftc-shadow);overflow:hidden}._ftc-preview-header{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--ftc-border);justify-content:space-between;align-items:center;padding:.625rem .75rem;display:flex}._ftc-preview-title{color:var(--ftc-text);font-size:.8125rem;font-weight:600}._ftc-viewport-indicator{align-items:center;gap:var(--main-space-1);display:flex}._ftc-viewport-label{color:var(--ftc-primary);font-size:.75rem;font-weight:500;font-family:var(--main-font-mono);border-radius:var(--ftc-radius);background:#6366f114;padding:.125rem .5rem}._ftc-viewport-slider-wrap{padding:.5rem .75rem .25rem}._ftc-viewport-slider{-webkit-appearance:none;appearance:none;background:var(--ftc-slider-track);cursor:pointer;touch-action:manipulation;border-radius:2px;outline:none;width:100%;height:4px}._ftc-viewport-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--ftc-primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 3px #0003}._ftc-viewport-slider::-moz-range-thumb{background:var(--ftc-primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 3px #0003}._ftc-viewport-marks{justify-content:space-between;padding-top:.125rem;display:flex}._ftc-viewport-marks span{color:var(--ftc-text-muted);font-size:.625rem;font-family:var(--main-font-mono)}._ftc-preview-area{align-items:center;min-height:120px;padding:1.25rem 1rem;display:flex}._ftc-preview-text{color:var(--ftc-text);word-break:break-word;margin:0;transition:font-size .15s}._ftc-formula-card{background:var(--ftc-formula-bg);border-radius:var(--ftc-radius-lg);border-style:dashed;border-width:1px;border-color:var(--ftc-formula-border);overflow:hidden}._ftc-formula-header{border-bottom-style:dashed;border-bottom-width:1px;border-bottom-color:var(--ftc-formula-border);padding:.5rem .75rem}._ftc-formula-title{color:var(--ftc-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}._ftc-formula-content{font-family:var(--main-font-mono);color:var(--ftc-text);-webkit-overflow-scrolling:touch;min-height:120px;padding:.75rem;font-size:.8125rem;line-height:1.7;overflow-x:auto}._ftc-formula-content ._ftc-formula-line{white-space:nowrap;margin-bottom:.25rem}._ftc-formula-content ._ftc-formula-line:last-child{margin-bottom:0}._ftc-formula-content ._ftc-formula-highlight{color:var(--ftc-primary);font-weight:600}._ftc-formula-content ._ftc-formula-muted{color:var(--ftc-text-muted);font-size:.75rem}@media (max-width:768px){._ftc-preview-area{min-height:80px;padding:1rem .75rem}._ftc-viewport-slider{height:6px}._ftc-viewport-slider::-webkit-slider-thumb{width:20px;height:20px}._ftc-viewport-slider::-moz-range-thumb{width:20px;height:20px}._ftc-viewport-slider-wrap{padding:.625rem .75rem .375rem}._ftc-formula-content{padding:.625rem;font-size:.75rem}}@media (max-width:480px){._ftc-preview-header{padding:.5rem .625rem}._ftc-preview-area{padding:.875rem .625rem}}._ftc-code-section{background:var(--ftc-code-bg);border-radius:var(--ftc-radius-lg);border-style:solid;border-width:1px;border-color:var(--ftc-border);overflow:hidden}._ftc-code-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;padding:.5rem .75rem;display:flex}._ftc-code-label{color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}._ftc-copy-btn{border-radius:var(--ftc-radius);color:#94a3b8;cursor:pointer;background:#ffffff14;border:0 #0000;align-items:center;gap:4px;padding:.25rem .625rem;font-size:.75rem;transition:all .15s;display:inline-flex}._ftc-copy-btn:hover{color:#e2e8f0;background:#ffffff26}._ftc-copy-btn.is-copied{color:#34d399;background:#10b98133}._ftc-code-output{font-family:var(--main-font-mono);color:var(--ftc-code-text);white-space:pre-wrap;word-break:break-word;-webkit-overflow-scrolling:touch;min-height:60px;margin:0;padding:.75rem;font-size:.8125rem;line-height:1.6;overflow-x:auto}@media (max-width:768px){._ftc-code-header{padding:.5rem .625rem}._ftc-copy-btn{min-height:36px;padding:.5rem .75rem;font-size:.8125rem}._ftc-code-output{padding:.625rem;font-size:.75rem}}._ftc-presets-grid{grid-template-columns:repeat(2,1fr);gap:6px;min-height:160px;display:grid}._ftc-preset-btn{border-style:solid;border-width:1px;border-color:var(--ftc-border);border-radius:var(--ftc-radius);background:var(--ftc-bg);cursor:pointer;flex-direction:column;align-items:center;gap:2px;padding:.5rem .375rem;transition:all .15s;display:flex}._ftc-preset-btn:hover{border-color:var(--ftc-border-hover);box-shadow:0 1px 4px #0000000f}._ftc-preset-btn.is-active{border-color:var(--ftc-primary);background:#6366f10a}._ftc-preset-name{color:var(--ftc-text);text-align:center;font-size:.6875rem;font-weight:600;line-height:1.2}._ftc-preset-size{color:var(--ftc-text-muted);font-size:.625rem;font-family:var(--main-font-mono)}@media (max-width:768px){._ftc-presets-grid{grid-template-columns:repeat(4,1fr);gap:8px}._ftc-preset-btn{gap:3px;min-height:48px;padding:.625rem .375rem}._ftc-preset-name{font-size:.75rem}._ftc-preset-size{font-size:.6875rem}}@media (max-width:480px){._ftc-presets-grid{grid-template-columns:repeat(2,1fr);gap:6px}}