*,:after,:before{box-sizing:border-box}body,html{min-height:100%}body,button,input{font:inherit}button,input{border:0;background:transparent}input{outline:none}:root{--itn-primary-50:#e6f4ff;--itn-primary-100:#bae0ff;--itn-primary-200:#91caff;--itn-primary-300:#69b1ff;--itn-primary-400:#4096ff;--itn-primary-500:#1677ff;--itn-primary-600:#0958d9;--itn-primary-700:#003eb3;--itn-primary-800:#002c8c;--itn-primary-900:#001d66;--itn-primary:var(--itn-primary-500);--itn-primary-contrast:#fff;--itn-primary-soft:var(--itn-primary-50);--itn-primary-hover:var(--itn-primary-600);--itn-primary-active:var(--itn-primary-700);--itn-focus-ring:rgba(105,177,255,.4);--itn-button-shadow:0 4px 16px rgba(64,150,255,.25);--itn-font-family:"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--itn-font-family-code:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;--itn-font-size-sm:12px;--itn-font-size:14px;--itn-font-size-lg:16px;--itn-font-size-xl:20px;--itn-font-size-h5:16px;--itn-font-size-h4:20px;--itn-font-size-h3:24px;--itn-font-size-h2:30px;--itn-font-size-h1:38px;--itn-line-height-sm:1.67;--itn-line-height:1.57;--itn-line-height-lg:1.5;--itn-font-weight:400;--itn-font-weight-strong:600;--itn-space-xxs:4px;--itn-space-xs:8px;--itn-space-sm:12px;--itn-space-md:16px;--itn-space-lg:20px;--itn-space-xl:24px;--itn-space-xxl:32px;--itn-space-xxxl:48px;--itn-radius-xs:2px;--itn-radius-sm:4px;--itn-radius:6px;--itn-radius-lg:8px;--itn-radius-xl:16px;--itn-radius-pill:999px;--itn-height-xs:16px;--itn-height-sm:24px;--itn-height:32px;--itn-height-lg:40px;--itn-duration-fast:0.1s;--itn-duration-mid:0.2s;--itn-duration-slow:0.3s;--itn-easing-standard:cubic-bezier(0.645,0.045,0.355,1);--itn-easing-decelerate:cubic-bezier(0.22,1,0.36,1);--itn-easing-accelerate:cubic-bezier(0.55,0,1,0.45);--itn-bg:#f5f5f5;--itn-surface:#fff;--itn-surface-secondary:#fafafa;--itn-bg-elevated:#fff;--itn-bg-mask:rgba(0,0,0,.45);--itn-text:rgba(0,0,0,.88);--itn-text-secondary:rgba(0,0,0,.65);--itn-text-tertiary:rgba(0,0,0,.45);--itn-text-muted:rgba(0,0,0,.45);--itn-text-disabled:rgba(0,0,0,.25);--itn-border:#d9d9d9;--itn-border-secondary:#f0f0f0;--itn-fill:rgba(0,0,0,.15);--itn-fill-secondary:rgba(0,0,0,.06);--itn-fill-tertiary:rgba(0,0,0,.04);--itn-fill-quaternary:rgba(0,0,0,.02);--itn-success:#52c41a;--itn-success-bg:#f6ffed;--itn-success-border:#b7eb8f;--itn-warning:#faad14;--itn-warning-bg:#fffbe6;--itn-warning-border:#ffe58f;--itn-error:#ff4d4f;--itn-error-bg:#fff2f0;--itn-error-border:#ffccc7;--itn-info:#1677ff;--itn-info-bg:#e6f4ff;--itn-info-border:#91caff;--itn-link:#1677ff;--itn-link-hover:#4096ff;--itn-link-active:#0958d9;--itn-shadow-sm:0 1px 2px rgba(0,0,0,.06);--itn-shadow:0 4px 16px rgba(0,0,0,.08);--itn-shadow-lg:0 12px 40px rgba(0,0,0,.12)}[data-theme=dark]{--itn-bg:#141414;--itn-surface:#1f1f1f;--itn-surface-secondary:#262626;--itn-bg-elevated:#2a2a2a;--itn-bg-mask:rgba(0,0,0,.65);--itn-text:hsla(0,0%,100%,.85);--itn-text-secondary:hsla(0,0%,100%,.65);--itn-text-tertiary:hsla(0,0%,100%,.45);--itn-text-muted:hsla(0,0%,100%,.45);--itn-text-disabled:hsla(0,0%,100%,.25);--itn-border:#303030;--itn-border-secondary:#1f1f1f;--itn-fill:hsla(0,0%,100%,.18);--itn-fill-secondary:hsla(0,0%,100%,.1);--itn-fill-tertiary:hsla(0,0%,100%,.06);--itn-fill-quaternary:hsla(0,0%,100%,.03);--itn-success:#49aa19;--itn-success-bg:#162312;--itn-success-border:#274916;--itn-warning:#d89614;--itn-warning-bg:#2b2111;--itn-warning-border:#443111;--itn-error:#dc4446;--itn-error-bg:#2c1618;--itn-error-border:#431c18;--itn-info:#1677ff;--itn-info-bg:#111d2c;--itn-info-border:#112545;--itn-link:#1677ff;--itn-link-hover:#4096ff;--itn-link-active:#0958d9;--itn-shadow-sm:0 1px 2px rgba(0,0,0,.3);--itn-shadow:0 4px 16px rgba(0,0,0,.4);--itn-shadow-lg:0 12px 40px rgba(0,0,0,.55)}body{font-family:var(--itn-font-family,"Segoe UI",sans-serif);font-size:var(--itn-font-size,14px);line-height:var(--itn-line-height,1.57);background:radial-gradient(circle at top left,rgba(22,119,255,.1),transparent 36%),var(--itn-bg,#f5f5f5);color:var(--itn-text);transition:background var(--itn-duration-slow,.3s) var(--itn-easing-standard,ease),color var(--itn-duration-mid,.2s) var(--itn-easing-standard,ease)}#app{min-height:100vh}.itn-shell{width:min(1140px,calc(100% - 32px));margin:0 auto;padding:32px 0 72px}.itn-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0 36px}.itn-header-brand{display:flex;flex-direction:column;gap:6px}.itn-header-desc{margin:0;font-size:var(--itn-font-size-sm,12px);color:var(--itn-text-tertiary)}.itn-mode-switcher{display:inline-flex;gap:2px;padding:3px;border-radius:var(--itn-radius-pill,999px);border:1px solid var(--itn-border);background:var(--itn-surface)}.itn-mode-btn{padding:6px 18px;border-radius:var(--itn-radius-pill,999px);font-size:var(--itn-font-size-sm,12px);font-weight:var(--itn-font-weight-strong,600);color:var(--itn-text-secondary);cursor:pointer;transition:background var(--itn-duration-fast,.1s),color var(--itn-duration-fast,.1s)}.itn-mode-btn--on{background:var(--itn-primary);color:var(--itn-primary-contrast)}.itn-panel{background:color-mix(in srgb,var(--itn-surface) 90%,transparent);border:1px solid var(--itn-border);border-radius:var(--itn-radius-xl,16px);box-shadow:var(--itn-shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.itn-picker-panel{display:flex;gap:32px;align-items:flex-start;padding:24px 28px;margin-bottom:20px}.itn-picker-left{display:flex;flex-direction:column;gap:14px;min-width:220px}.itn-picker-right{flex:1 1;display:flex;flex-direction:column;gap:14px;min-width:0}.itn-picker-row{display:flex;align-items:center;gap:10px}.itn-color-well-wrap{display:flex;cursor:pointer}.itn-color-well{width:42px;height:42px;padding:2px;border:none;border-radius:var(--itn-radius,6px);cursor:pointer;background:transparent}.itn-color-hex{width:96px;padding:9px 12px;border:1px solid var(--itn-border);border-radius:var(--itn-radius,6px);background:var(--itn-surface-secondary);color:var(--itn-text);font-family:var(--itn-font-family-code,monospace);font-size:var(--itn-font-size-sm,12px);text-transform:uppercase;transition:border-color var(--itn-duration-mid,.2s)}.itn-color-hex:focus{outline:none;border-color:var(--itn-primary);box-shadow:0 0 0 3px var(--itn-focus-ring)}.itn-presets{display:flex;flex-wrap:wrap;gap:8px}.itn-preset{width:28px;height:28px;border-radius:var(--itn-radius-sm,4px);border:2px solid transparent;cursor:pointer;transition:transform var(--itn-duration-fast,.1s) var(--itn-easing-decelerate,ease),border-color var(--itn-duration-fast,.1s)}.itn-preset:hover{transform:scale(1.18)}.itn-preset--active{border-color:var(--itn-text)}.itn-hero{display:grid;grid-gap:20px;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:stretch}.itn-panel--hero{padding:24px 28px}.itn-token-preview{display:flex;flex-direction:column;gap:20px;margin-top:14px}.itn-token-group{display:flex;flex-direction:column;gap:8px}.itn-token-group-label{font-size:11px;font-weight:var(--itn-font-weight-strong,600);letter-spacing:.06em;text-transform:uppercase;color:var(--itn-text-tertiary)}.itn-token-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:var(--itn-font-size-sm,12px)}.itn-tag{padding:3px 10px;border-radius:var(--itn-radius-sm,4px);border:1px solid transparent;font-weight:var(--itn-font-weight-strong,600)}.itn-fill-pill,.itn-tag{display:inline-flex;align-items:center;font-size:var(--itn-font-size-sm,12px)}.itn-fill-pill{padding:3px 12px;border-radius:var(--itn-radius-sm,4px);border:1px solid var(--itn-border);color:var(--itn-text)}.itn-shadow-demo{display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--itn-radius,6px);background:var(--itn-surface);font-size:var(--itn-font-size-sm,12px);color:var(--itn-text-secondary)}.itn-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-gap:8px;gap:8px}.itn-swatch{min-height:64px;padding:8px;color:#fff;font-size:11px;font-weight:600;display:flex;align-items:flex-end}.itn-code,.itn-swatch{border-radius:var(--itn-radius,6px)}.itn-code{margin:12px 0 0;padding:16px;background:#0b1120;color:#bae0ff;overflow:auto;font-family:var(--itn-font-family-code,monospace);font-size:12px;line-height:1.7;max-height:480px}.itn-usage-section{margin-top:20px;padding:24px 28px}.itn-label{display:block;font-weight:var(--itn-font-weight-strong,600);letter-spacing:.06em;color:var(--itn-text-tertiary)}.itn-kicker,.itn-label{font-size:11px;text-transform:uppercase}.itn-kicker{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--itn-radius-pill,999px);background:var(--itn-primary-soft);color:var(--itn-primary-hover);font-weight:700;letter-spacing:.08em}@media (max-width:720px){.itn-shell{width:min(calc(100% - 24px),1140px);padding:20px 0 40px}.itn-header{align-items:flex-start;gap:16px;padding-bottom:24px}.itn-header,.itn-picker-panel{flex-direction:column}.itn-picker-left{min-width:0;width:100%}.itn-swatches{grid-template-columns:repeat(5,minmax(0,1fr))}.itn-panel--hero,.itn-usage-section{padding:20px}}body,html{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--itn-bg);color:var(--itn-text);overflow-x:hidden}*{box-sizing:border-box}a{color:inherit;text-decoration:none}.glass-panel{background:var(--itn-surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--itn-border);box-shadow:var(--itn-shadow)}.hover-lift{transition:transform .3s cubic-bezier(.175,.885,.32,1.275),box-shadow .3s ease}.hover-lift:hover{transform:translateY(-8px);box-shadow:var(--itn-shadow-lg)}.gradient-text{background:linear-gradient(135deg,var(--itn-primary) 0,#36cfc9 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glow-bg{position:absolute;width:600px;height:600px;background:radial-gradient(circle,var(--itn-primary-100) 0,rgba(26,115,232,0) 70%);top:-200px;left:-200px;opacity:.15;border-radius:50%;pointer-events:none;z-index:-1}[data-theme=light] .glow-bg{background:radial-gradient(circle,var(--itn-primary-200) 0,rgba(26,115,232,0) 60%);opacity:.4}