.color-page{height:auto;min-height:100dvh}.color-page .color-shell{display:block;max-width:1500px;margin:auto;padding:16px 24px 28px}.color-heading,.section-heading,.color-toolbar,.color-toolgroup,.palette-header,.color-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.color-heading h1{font-size:18px;letter-spacing:-.4px}.color-local{font-size:12px;color:var(--muted)}.color-subnav{display:flex;gap:20px;align-items:center;margin:16px 0;border-bottom:1px solid var(--border);font-size:13px}.color-subnav>span{color:var(--muted)}.color-subnav a{padding:10px 0;text-decoration:none;border-bottom:2px solid var(--blue);font-weight:600}.color-workspace{background:var(--surface);border:1px solid var(--border);border-radius:10px}.color-toolbar{padding:14px 18px;flex-wrap:wrap;border-bottom:1px solid var(--border)}.color-toolgroup{justify-content:flex-start;flex-wrap:wrap;gap:8px}.color-page button,.color-page select,.color-page input{font-family:inherit}.color-toolbar button,.color-toolgroup button,.color-export-link,.palette-header button,.preset-panel button{min-height:34px;border:1px solid var(--border);border-radius:6px;padding:7px 11px;font-size:12px;font-weight:500;background:var(--surface);text-decoration:none;color:var(--text)}.color-page button:hover:not(:disabled){filter:brightness(.97)}.color-page button:disabled{opacity:.4;cursor:not-allowed}.color-page button:focus-visible,.color-page input:focus-visible,.color-page select:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.color-page .color-primary{background:var(--blue);border-color:var(--blue);color:white}.color-page select{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:7px 25px 7px 10px;font-size:12px;min-height:34px}.palette{padding:18px;border-bottom:1px solid var(--border)}.palette-header{justify-content:flex-start;flex-wrap:wrap;margin-bottom:12px;font-size:12px}.palette-header label{display:flex;align-items:center;gap:8px}.palette-header input[type=text]{font:12px 'IBM Plex Mono',monospace;width:110px;padding:7px 9px;color:var(--text);background:var(--code);border:1px solid var(--border);border-radius:5px;height:34px}.palette-header input[type=color]{height:34px;width:34px;padding:2px;background:none;border:1px solid var(--border);border-radius:6px;cursor:pointer}.palette-header .palette-name{font-family:inherit;width:130px}.palette-header .palette-position{font-size:11px;color:var(--muted);min-width:22px}.palette-header .lock-color{margin-left:auto}.palette-header .lock-color[aria-pressed=true]{border-color:var(--blue);color:var(--blue);background:var(--code)}.shade-grid{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px}.shade{border-radius:7px;border:1px solid #20293810;min-height:92px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:12px 10px;position:relative}.shade strong{font-size:12px;font-weight:600}.shade code{font-size:10px;letter-spacing:-.2px}.shade[data-step='500']:after{content:'BASE';font-size:8px;position:absolute;right:9px;top:14px;opacity:.7}.shade:hover{transform:translateY(-2px)}.color-bottom{padding:12px 18px;font-size:11px;color:var(--muted);flex-wrap:wrap}#color-status{color:var(--blue)}.palette-adjust{margin-top:12px;font-size:12px;color:var(--muted)}.palette-adjust summary{cursor:pointer;width:fit-content}.adjust-fields{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding-top:12px}.adjust-fields label{display:grid;grid-template-columns:1fr 30px;gap:6px;flex:1;min-width:160px}.adjust-fields input{width:100%;grid-column:1/-1;accent-color:var(--blue)}.adjust-fields output{text-align:right}.adjust-fields button{border:1px solid var(--border);border-radius:5px;font-size:12px;padding:8px}.preset-panel{padding:18px;background:var(--code);border-bottom:1px solid var(--border)}.preset-panel[hidden]{display:none}.preset-panel h2{font-size:14px;margin:0}.preset-panel p{font-size:12px;color:var(--muted)}#presets{display:flex;flex-wrap:wrap;gap:10px}.preset-panel button{display:flex;align-items:center;gap:5px}.preset-panel i{width:18px;height:18px;border-radius:50%;display:block}.preset-panel span{margin-left:5px}.section-heading{margin:26px 0 14px;flex-wrap:wrap}.section-heading h2{font-size:16px;margin:0}.section-heading p{font-size:12px;margin:4px 0 0;color:var(--muted)}.theme-toggle{display:flex;align-items:center;gap:8px;font-size:12px}.theme-toggle input{accent-color:var(--blue);width:16px;height:16px}.design-controls{display:flex;flex-wrap:wrap;gap:14px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-bottom:16px}.design-control{display:grid;gap:6px;font-size:11px;color:var(--muted);flex:1;min-width:120px}.design-control>div{display:flex;gap:4px}.design-control select{width:100%;min-width:0}.design-control button{border:1px solid var(--border);border-radius:5px;font-size:11px;padding:0 7px}.design-control button[aria-pressed=true]{color:var(--blue);border-color:var(--blue)}.preview-tabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.preview-tabs button{font-size:12px;border:1px solid var(--border);padding:7px 12px;border-radius:6px;background:var(--surface)}.preview-tabs button[aria-pressed=true]{background:var(--text);color:var(--surface)}.preview-tabs #shuffle-design{margin-left:auto}.mockups{--ui-radius:10px;--ui-pad:22px;--ui-font:Inter,'Noto Sans Thai',sans-serif;--ui-heading:var(--ui-font);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:20px;background:var(--ui-bg);border-radius:12px;color:var(--ui-text);font-family:var(--ui-font);border:1px solid var(--ui-border);align-items:start}.mockups button,.mockups input,.mockups select{font-family:var(--ui-font)}.mock-card{border:1px solid var(--ui-border);background:var(--ui-surface);border-radius:var(--ui-radius);padding:var(--ui-pad);min-width:0;overflow:hidden}.mock-card[hidden]{display:none!important}.mock-card h3{font-family:var(--ui-heading);font-size:15px;letter-spacing:-.3px;margin:0 0 10px;font-weight:600}.mock-card p{font-size:12px;line-height:1.7;color:var(--ui-muted);margin:6px 0 14px}.mock-card button{font-size:12px;border-radius:calc(var(--ui-radius)*.65);min-height:36px;padding:8px 13px;font-weight:500}.mock-primary{background:var(--p600);color:var(--p-ink);border:1px solid transparent}.mock-primary:hover,.mock-primary.demo-hover{background:var(--p700)}.mock-secondary{background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border)}.mock-secondary:hover,.mock-secondary.demo-hover{background:var(--ui-bg)}.mock-text{color:var(--ui-link);padding:0!important;min-height:28px!important}.mock-muted{color:var(--ui-muted);font-size:11px}.mock-badge,.mock-tag{font-size:10px;padding:4px 8px;border-radius:calc(var(--ui-radius)*.6);background:var(--ui-tint);color:var(--ui-link);display:inline-block;white-space:nowrap}.mock-tag.secondary-tag{background:var(--s100);color:var(--s800)}.mock-tag.accent-tag{background:var(--a100);color:var(--a800)}.mock-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.mock-topline h3{margin:0}.mock-number{font-size:30px;font-weight:600;letter-spacing:-1px;color:var(--ui-text)}.mock-chart{display:flex;align-items:end;gap:10px;height:120px;padding-top:12px}.mock-chart i{height:var(--bar);flex:1;background:var(--chart-color);border-radius:3px 3px 0 0}.mock-chart i:nth-child(2n){opacity:.6}.chart-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--ui-muted);padding-top:10px}.mock-hero{background:var(--p900);border-color:var(--p900);color:var(--p900-ink);position:relative;min-height:290px}.mock-hero h3{font-size:28px;line-height:1.4;margin:20px 0 12px;position:relative;z-index:1}.mock-hero p{color:inherit;opacity:.8;position:relative;z-index:1}.mock-hero .mock-primary{background:var(--p100);color:var(--p800);position:relative;z-index:1}.mock-eyebrow{font-size:9px;letter-spacing:1.6px}.hero-orbit{position:absolute;width:180px;height:180px;right:-70px;top:25px;transform:rotate(-25deg);opacity:.65}.hero-orbit div{width:130px;height:130px;border:18px solid var(--s500);border-radius:50%;position:absolute}.hero-orbit div:nth-child(2){top:65px;left:-25px;border-color:var(--p500)}.hero-orbit div:nth-child(3){top:125px;left:-50px;border-color:var(--a400)}.mock-profile{text-align:center}.mock-avatar{display:grid;place-items:center;margin:0 auto 14px;width:62px;height:62px;border-radius:50%;background:var(--s100);color:var(--s800);font-size:20px;font-weight:600}.profile-stats{display:flex;justify-content:center;gap:40px;margin:20px 0}.profile-stats strong,.profile-stats span{display:block}.profile-stats strong{font-size:18px}.profile-stats span{font-size:10px;color:var(--ui-muted);margin-top:4px}.mock-profile button{width:100%}.mock-form form{display:grid;gap:9px}.mock-form label{font-size:11px}.mock-form input:not([type=checkbox]),.mock-form select{width:100%;height:36px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:calc(var(--ui-radius)*.6);padding:7px 10px;font-size:12px;color:var(--ui-text)}.mock-check{display:flex;align-items:center;gap:7px;margin:4px 0}.mockups input[type=checkbox]{accent-color:var(--p600)}.schedule-row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--ui-border)}.schedule-row:last-child{border-bottom:0;padding-bottom:0}.schedule-row time{font-size:11px;color:var(--ui-muted);padding-top:2px}.schedule-row strong{font-size:12px;font-weight:500}.schedule-row p{font-size:11px;margin:3px 0 6px}.mock-pricing h3{font-size:22px;margin:22px 0 8px}.mock-pricing ul{list-style:none;padding:0;font-size:12px;line-height:2.8;margin:20px 0}.mock-pricing li:before{content:'✓';color:var(--ui-link);margin-right:10px}.mock-pricing button{width:100%}.component-labels,.component-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.component-labels{font-size:10px;color:var(--ui-muted)}.component-row button{padding:7px 4px;font-size:11px}.mock-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}.calendar-grid span{font-size:10px;color:var(--ui-muted);padding:10px 0}.calendar-grid button{font-size:11px;padding:4px;min-height:30px;background:transparent;color:var(--ui-text)}.calendar-grid button[aria-pressed=true]{background:var(--p600);color:var(--p-ink)}.calendar-grid button:hover{background:var(--ui-tint)}.mock-tasks>label{display:flex;align-items:center;gap:8px;font-size:12px;padding:12px 0;border-bottom:1px solid var(--ui-border)}.mock-tasks .mock-tag{margin-left:auto}.mock-tasks input:checked+span{text-decoration:line-through;color:var(--ui-muted)}.mock-progress{height:6px;background:var(--ui-border);border-radius:10px;margin-top:22px;overflow:hidden}.mock-progress>span{display:block;width:33.33%;height:100%;background:var(--p500)}.mock-notice{display:flex;gap:15px;grid-column:span 2;align-items:center}.notice-symbol{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--ui-tint);color:var(--ui-link)}.mock-notice h3{font-size:13px;margin:0}.mock-notice p{margin:4px 0}.demo-status{font-size:11px;color:var(--muted);min-height:18px;margin:10px 0}.export-section{scroll-margin-top:20px}.export-section .color-toolgroup label{font-size:11px;color:var(--muted)}#export-code{width:100%;height:300px;display:block;border:1px solid var(--border);border-radius:8px;background:var(--surface);font:12px/1.7 'IBM Plex Mono',monospace;padding:20px;resize:vertical;color:var(--text);white-space:pre}#export-hint{font-size:12px;color:var(--muted);line-height:1.8}.color-footer{margin:28px 0 0;gap:16px;flex-wrap:wrap;font-size:11px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.contrast-summary{font-size:11px;color:var(--muted);margin:12px 0;line-height:1.8}.mockups[data-style=soft] .mock-card{border-color:transparent;box-shadow:0 6px 22px #1721300a}.mockups[data-style=outline] .mock-card{border-width:2px;box-shadow:none}.mockups[data-style=compact]{--ui-pad:16px;gap:12px}.mock-menu{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:15px;margin-bottom:18px;border-bottom:1px solid var(--ui-border)}.mock-menu button{color:var(--ui-muted);padding:6px 10px;font-size:11px;background:transparent}.mock-menu button[aria-pressed=true]{background:var(--ui-tint);color:var(--ui-link)}.mockups[data-menu=solid] .mock-menu button[aria-pressed=true]{background:var(--p600);color:var(--p-ink)}
@media(min-width:1250px){.mockups{grid-template-columns:repeat(4,minmax(0,1fr))}.mock-hero{grid-column:span 2}.mock-notice{grid-column:span 2}.mock-components{grid-column:span 2}}
@media(max-width:1050px){.mockups{grid-template-columns:repeat(2,minmax(0,1fr))}.shade-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.shade{min-height:76px}}
@media(max-width:640px){.color-page .color-shell{padding:12px}.color-local{display:none}.color-toolbar{padding:12px}.palette{padding:12px}.palette-header{gap:8px}.palette-header .palette-position{display:none}.palette-header .palette-name{width:100px}.palette-header input[type=text]{width:90px}.palette-header .lock-color{margin-left:0}.shade-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.shade{min-height:72px;padding:9px}.shade[data-step='500']:after{top:12px;right:7px}.mockups{grid-template-columns:1fr;padding:12px;gap:12px}.mock-notice,.mock-hero,.mock-components{grid-column:auto}.section-heading{align-items:flex-start}.design-controls{gap:10px;padding:12px}.design-control{min-width:calc(50% - 10px)}.color-bottom{padding:12px}.export-section .color-toolgroup{gap:6px}.color-footer{line-height:1.7}.color-page .color-heading h1{font-size:16px}}