/* Compact editing workspace. Keep this sheet last. */
:root{--page:#101113;--paper:#18191d;--ink:#ececef;--ink-soft:#bfc0c8;--muted:#92949f;--line:#303137;--line-strong:#42434d;--soft:#25262c;--accent:#807db9;--accent-hover:#9390cd;--accent-soft:#292833;--radius:8px;--radius-sm:5px}
body{font-size:14px;background:var(--page)}
.site-header{height:60px;max-width:1600px;padding:0 24px;gap:20px}
.author-logo{width:32px;height:32px}.brand{gap:10px}.brand-name{font-size:15px}.brand-caption{font-size:11px;line-height:1.4}.header-actions{gap:8px}.header-actions>a:not(.button),.header-actions .button{font-size:12px}
main,.main-shell,.page-shell{max-width:1600px;padding:18px 24px 0}
.page-intro{align-items:center;margin-bottom:15px;gap:16px}.page-intro>div{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap}.page-intro h1{font-size:24px;line-height:1.35;margin:0;letter-spacing:-.03em}.page-intro .eyebrow,.page-intro .status-badge{display:none}.page-intro .intro-copy{font-size:12px;line-height:1.7;margin:0;color:var(--muted)}
.workspace{grid-template-columns:250px minmax(0,1fr);gap:14px;align-items:start}
.sidebar{display:flex;flex-direction:column;gap:12px}.sidebar-note{display:none}.panel{padding:14px;border-radius:8px;box-shadow:none}.panel-head{margin-bottom:12px;gap:8px}.panel-title{font-size:14px;line-height:1.5;gap:7px}.step-number{min-width:20px;height:20px;border-radius:4px;font-size:11px}.panel-head>.subtle{display:none}
.button{border-radius:5px;min-height:35px;font-size:12px;padding:8px 11px;box-shadow:none}.button.small{font-size:12px;min-height:33px;padding:6px 9px}.button.icon-only{min-height:32px;min-width:32px;width:32px;padding:6px}.button.primary{background:#807db9;border-color:#807db9;color:#fff}.button.primary:hover{background:#9390cd;border-color:#9390cd;color:#fff}.button.secondary{background:#222329;border-color:#42434d}.button.secondary:hover{background:#2b2c33;border-color:#64616e}.button:focus-visible,.tab:focus-visible,.route-option:focus-visible,.preset-card:focus-visible{outline-color:#b2aee8}
.color-row{padding:8px;gap:8px;border-radius:5px}.color-row.selected,.color-row.is-selected{border-color:#807db9;box-shadow:0 0 0 1px #807db929}.color-chip{width:35px;height:37px;min-width:35px;border-radius:3px}.color-row label.field-label,.field-label{font-size:12px}.color-row label.field-label{font-size:11px}.hex-input{font-size:14px;line-height:1.4}.color-row .button{width:27px;min-width:27px;min-height:28px;padding:5px}.color-inputs{gap:8px}#extra-colors{gap:8px;margin-top:0}#extra-colors:empty{display:none}.middle-position input{min-height:28px;font-size:12px}.middle-position{font-size:11px}.tip,.notice{font-size:12px;line-height:1.65}.sidebar .tip{margin-top:9px;font-size:11px;line-height:1.65}.sidebar .active-color-note{margin-top:5px}.sidebar #add-color{margin-top:9px;min-height:31px;font-size:12px}.text-button{font-size:12px;line-height:1.5}
.workbench{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto auto;gap:12px;min-width:0;align-items:start}
.workbench>.preview-card{grid-column:1;grid-row:1}.workbench>.stops-panel{grid-column:1;grid-row:2}.workbench>.route-panel{grid-column:2;grid-row:1/span 2}
.preview-card{border-radius:8px;box-shadow:none}.preview-head{padding:9px 12px;min-height:49px;gap:8px}.view-tabs{padding:2px;border-radius:5px;gap:2px}.tab{font-size:12px;padding:6px 10px;border-radius:3px}.preview-actions{gap:7px}.preview-actions>span{font-size:11px}.preview-stage{padding:10px}.preview-stage>canvas,.preview-stage #gradientCanvas,.preview-stage .gradient-canvas{width:100%;height:auto;aspect-ratio:16/9;max-height:260px;border-radius:3px}.preview-overlay{inset:10px;padding:10px}.preview-overlay>span:first-child{display:none}.preview-overlay{justify-content:flex-end}.preview-label{font-size:11px;padding:3px 7px;border-radius:3px;align-self:flex-start}.preview-bottom{padding:8px 12px;font-size:11px;gap:10px;min-height:35px}.compare-grid{padding:10px;gap:10px}.compare-tile canvas{width:100%;height:210px;aspect-ratio:auto;border-radius:3px}.compare-caption{font-size:12px;line-height:1.5;padding-top:6px}.compare-caption span{font-size:11px;line-height:1.5}
.route-panel .panel-head{margin-bottom:10px}.route-panel .panel-title{font-size:14px}.route-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.route-option{display:block;padding:6px;border-radius:5px;text-align:center;background:#1e1f24;border-color:#35363f;min-width:0}.route-option:hover{background:#25252d;border-color:#76718f}.route-option.selected,.route-option[aria-pressed=true]{border-color:#807db9;background:#292833;box-shadow:0 0 0 1px #807db94d}.route-mini{width:100%;height:21px;margin:0 0 6px;border-radius:2px}.route-copy{display:block;padding:0;line-height:1.4}.route-copy strong{font-size:12px;font-weight:600;white-space:nowrap}.route-copy small{display:none}.route-check{display:none}
.route-map-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:11px}.route-map-card{padding:7px 5px 6px;background:#141519;border:1px solid #30313a;border-radius:5px;min-width:0}.route-map-title{justify-content:center;font-size:12px;font-weight:600;margin:0 0 4px;gap:5px}.route-map-title span,.route-map-title small{display:none}.route-map-canvas{width:100%;max-width:145px;height:auto;aspect-ratio:240/220;margin:auto;border-radius:0;cursor:crosshair;touch-action:none;background:#141519}.route-map-note{font-size:12px;line-height:1.6;margin:8px 0 0;color:#9d9faa}
.lightness-tools{margin-top:10px;padding-top:9px;gap:5px 12px;align-items:center;justify-content:flex-start}.switch-label{font-size:12px;line-height:1.5;gap:6px;min-height:28px}.switch-label small{display:none}.check-toggle,.switch-label input[type=checkbox]{width:15px;height:15px;min-width:15px;border-radius:3px}.lightness-panel{padding:8px 9px;margin-top:7px;border-radius:5px}.lightness-labels{font-size:11px;line-height:1.5;margin:0 0 6px;gap:7px}.lightness-labels strong{font-size:11px}.lightness-labels>span:first-child{display:none}.lightness-strip{width:100%;height:18px;min-height:18px;border-radius:2px}.lightness-panel>.tip{font-size:11px;line-height:1.6;margin:6px 0 0}.lightness-curve{height:44px;margin-top:7px}
details.lightness-detail{border:0;border-top:1px solid #303137;margin-top:7px;padding-top:5px}.lightness-detail>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:var(--muted);font-size:11px;line-height:1.5;padding:4px 0}.lightness-detail>summary::-webkit-details-marker{display:none}.lightness-detail>summary::after{content:"+";font-size:14px}.lightness-detail[open]>summary::after{content:"−"}.lightness-detail .tip{font-size:11px;margin:5px 0 0;line-height:1.6}.lightness-detail .lightness-labels>span:first-child{display:inline}
.toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;margin-top:11px;padding-top:11px;align-items:end}.toolbar>.control-group:first-child{grid-column:1/-1}.toolbar .control-group{min-width:0}.toolbar .angle-control{min-width:0;max-width:none;width:100%}.section-label{font-size:12px;margin-bottom:5px}.segmented{display:flex;width:100%;padding:2px;border-radius:5px}.segmented button{flex:1;font-size:12px;min-height:32px;padding:5px 8px;gap:5px}.shape-icon{width:12px;height:12px}.toolbar>.button{font-size:11px;padding:7px 8px;min-height:31px}.range-value{font-size:11px}.advanced{margin-top:10px;border-radius:5px}.advanced summary{font-size:12px;padding:10px 11px;line-height:1.5}.advanced summary>span{display:none}.advanced-grid{grid-template-columns:1fr 1fr;gap:10px;padding:0 11px 11px}.advanced .field-label{font-size:11px}.advanced-grid select{font-size:11px;min-height:34px;margin-top:5px}.advanced>.tip{font-size:11px;line-height:1.6;margin:0 11px 10px}.advanced-grid input{margin-top:11px}
.stops-panel{padding:13px 14px}.samples-head{align-items:center;flex-direction:row;gap:10px;margin-bottom:5px;flex-wrap:wrap}.samples-head .panel-title{font-size:14px}.inline-actions{gap:10px;width:auto}.sample-count{font-size:12px;gap:4px}.sample-count select{font-size:12px;min-height:28px}.samples-head .text-button{font-size:11px}.stops-panel #sample-tip{font-size:11px;margin:2px 0 0;line-height:1.5}.sample-grid{grid-template-columns:repeat(var(--sample-count,8),minmax(0,1fr));margin-top:10px;gap:6px}.sample-color .sample-swatch{height:31px;border-radius:3px}.sample-hex{font-size:11px;line-height:1.65;letter-spacing:-.025em}.sample-pos{font-size:10px;line-height:1.5}.sample-pos svg{display:none}.download-row{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;padding-top:9px;margin-top:10px}.download-row .button{min-height:31px;font-size:11px;padding:6px 8px;gap:5px}.download-row>.subtle{display:none}.download-row .text-button{font-size:11px}.export-bar{flex-direction:row;align-items:center;gap:9px;margin-top:11px;padding-top:11px}.export-bar>div:first-child>strong{font-size:11px;font-weight:500;white-space:nowrap}.export-bar>div:first-child>p{display:none}.export-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:none;width:auto}.export-actions select{width:161px;max-width:180px;min-height:34px;font-size:11px}.export-actions .button{font-size:12px;min-height:34px;padding:7px 10px;gap:5px}.export-note{font-size:11px;line-height:1.5;margin-top:8px}.dimensions{margin-top:9px;gap:8px;flex-wrap:wrap}.dimensions label,.dimensions>span{font-size:11px}.dimensions input{min-height:31px;font-size:12px}.dimensions .tip{font-size:11px}.manual-controls{padding-top:5px}.stop-track{height:23px;margin-top:4px;margin-bottom:23px}.stop-handle{top:17px}.selected-stop-editor{gap:7px;margin:5px 0 9px}.selected-stop-editor label{font-size:11px}.selected-stop-editor .tip{font-size:11px}.manual-banner{margin-top:9px;font-size:11px;padding:7px 8px;gap:7px}.manual-banner .text-button{font-size:11px}
details.image-panel{padding:0;overflow:hidden}details.image-panel>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;padding:12px 14px;font-size:12px;font-weight:600;line-height:1.6}details.image-panel>summary::-webkit-details-marker{display:none}details.image-panel>summary::after{content:"+";font-size:17px;font-weight:400;line-height:1;color:var(--muted)}details.image-panel[open]>summary{border-bottom:1px solid var(--line)}details.image-panel[open]>summary::after{content:"−"}details.image-panel>.image-panel-content{padding:12px}details.image-panel>.image-drop,details.image-panel>#image-picker{margin:12px}details.image-panel>.tip{margin:0;padding:0 12px 12px;font-size:11px}.image-drop{min-height:106px;padding:14px 9px;border-radius:5px}.image-drop strong{font-size:12px}.image-drop span,.image-drop small{font-size:11px}.image-wrap{max-height:200px;border-radius:5px}.source-image,.image-wrap>canvas{max-height:none}.pick-target{font-size:11px;min-height:30px}.auto-extract{margin-top:10px;padding-top:10px}.extract-head{margin-bottom:7px}.extract-head h3,.extract-head strong{font-size:12px}.extract-head>span,.extract-head small{font-size:11px}.extract-controls{gap:7px;margin-bottom:8px}.extract-controls label{font-size:11px}.extract-controls select{font-size:11px;min-height:32px}.extract-canvas{height:26px;margin-bottom:8px}.extract-apply{min-height:32px;font-size:12px}.extract-status{font-size:11px;line-height:1.6;margin-top:6px}
.editor-supplement{margin-top:15px;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:12px}.editor-supplement>details{border:1px solid var(--line);border-radius:6px;background:#18191d;margin:0;min-width:0;padding:0;overflow:hidden}.editor-supplement>details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:13px;font-weight:600;line-height:1.5;padding:12px 14px}.editor-supplement>details>summary::-webkit-details-marker{display:none}.editor-supplement>details>summary::after{content:"+";font-size:18px;font-weight:400;color:var(--muted)}.editor-supplement>details[open]>summary{border-bottom:1px solid var(--line)}.editor-supplement>details[open]>summary::after{content:"−"}.editor-supplement .preset-section,.editor-supplement .learning-section{border-top:0;margin:0;padding:14px}.editor-supplement>.preset-section[open],.editor-supplement>.learning-section[open]{padding-bottom:14px}.editor-supplement>.preset-section>.section-heading,.editor-supplement>.learning-section>.section-heading{padding:14px 14px 0}.editor-supplement>.preset-section>.preset-grid,.editor-supplement>.learning-section>.learning-grid{margin:0 14px}.editor-supplement .section-heading{margin-bottom:12px}.editor-supplement .section-heading .eyebrow{display:none}.editor-supplement .section-heading h2{font-size:15px}.editor-supplement .section-heading>.subtle{display:none}.editor-supplement .preset-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.editor-supplement .preset-card{padding:6px;border-radius:5px}.editor-supplement .preset-card canvas{aspect-ratio:3.2;margin-bottom:7px}.editor-supplement .preset-title{font-size:12px}.editor-supplement .preset-card small{font-size:11px}.editor-supplement .learning-grid{grid-template-columns:1fr;gap:10px}.editor-supplement .lesson-card{padding:14px;border-radius:5px}.editor-supplement .lesson-card:first-child{display:block}.editor-supplement .lesson-card h3{font-size:15px;line-height:1.5;margin:5px 0 7px}.editor-supplement .lesson-card p{font-size:12px;line-height:1.8}.editor-supplement .lesson-card small{font-size:11px}.editor-supplement .lesson-number{font-size:11px}.editor-supplement .mini-palette{height:28px;margin:12px 0 8px}.editor-supplement .lesson-tags{margin:12px 0 9px}
.footer{max-width:1600px;padding:15px 24px;margin-top:19px;gap:15px;font-size:11px;align-items:center}.footer>div:first-child{gap:9px}.footer-brand-image{width:29px;height:29px}.footer>div:first-child>span{display:none}.footer strong{font-size:12px}.footer-links{gap:14px}.footer-links>a,.footer-links>.text-button{font-size:11px}.share-corner{border-radius:6px;min-height:36px;font-size:12px;padding:8px 12px;bottom:18px;right:18px}.share-corner svg{width:14px;height:14px}
@media(min-width:1020px) and (max-width:1359px){
 .site-header{padding-left:20px;padding-right:20px}main,.main-shell,.page-shell{padding-left:20px;padding-right:20px}.workspace{grid-template-columns:236px minmax(0,1fr);gap:12px}.workbench{grid-template-columns:minmax(0,1fr) 300px;gap:12px}.panel{padding:12px}.route-panel{padding:12px}.panel-title,.route-panel .panel-title,.samples-head .panel-title{font-size:13px}.sample-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 9px}.sample-color .sample-swatch{height:24px}.sample-hex{font-size:11px}.sample-pos{font-size:10px}.samples-head{gap:6px}.inline-actions{width:100%;justify-content:space-between}.export-bar{flex-direction:column;align-items:stretch;gap:7px}.export-actions{justify-content:flex-start}.export-actions select{width:158px;max-width:none;flex:1;min-width:130px}.export-actions .button{padding:7px 8px;font-size:11px}.download-row{gap:7px}.download-row .button{padding:6px 7px;font-size:11px}.preview-stage>canvas{max-height:225px}.preview-bottom{font-size:11px;padding:8px 10px;flex-wrap:wrap}.route-map-canvas{max-width:132px}.route-map-grid{gap:6px}.route-map-card{padding-left:4px;padding-right:4px}.lightness-tools{gap:5px 9px}.switch-label{font-size:11px}.editor-supplement .preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer{padding-left:20px;padding-right:20px}
}
@media(max-width:1019px){
 .site-header{padding:0 20px}main,.main-shell,.page-shell{padding:17px 20px 0}.workspace{grid-template-columns:236px minmax(0,1fr);gap:12px}.workbench{display:flex;flex-direction:column;gap:12px}.workbench>.preview-card,.workbench>.route-panel,.workbench>.stops-panel{width:100%}.preview-stage>canvas{max-height:260px;aspect-ratio:16/9}.preview-actions>span{display:none}.route-panel .route-options{grid-template-columns:repeat(3,minmax(0,1fr))}.route-panel .route-map-grid{gap:10px;margin-top:10px}.route-map-canvas{max-width:190px;max-height:175px}.route-map-card{padding-top:6px;padding-bottom:4px}.route-map-title{margin-bottom:3px}.route-map-note{margin-top:6px;font-size:11px}.route-panel .lightness-tools{display:flex;justify-content:space-between}.lightness-panel{padding:7px 9px}.lightness-panel>.tip{font-size:11px}.toolbar{grid-template-columns:minmax(0,1fr) auto}.sample-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.samples-head{align-items:flex-start}.inline-actions{width:100%;justify-content:space-between}.sample-color .sample-swatch{height:28px}.export-bar{flex-direction:column;align-items:stretch;gap:8px}.export-actions{justify-content:flex-start}.export-actions select{width:100%;max-width:none;flex:1;min-width:140px}.export-actions .button{padding:7px 9px}.editor-supplement{gap:12px}.editor-supplement .preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer{padding:16px 20px;flex-wrap:wrap;gap:10px}
}
@media(max-width:760px){
 .site-header{height:58px;padding:0 16px;gap:12px}.brand-name{font-size:14px}.brand-caption{font-size:10px}.header-actions{gap:3px}.header-actions>a:not(.button){font-size:11px;padding:6px}.header-actions .button{font-size:11px;padding:6px 8px;min-height:32px}.author-logo{width:29px;height:29px}main,.main-shell,.page-shell{padding:16px 16px 0}.page-intro{margin-bottom:13px}.page-intro h1{font-size:23px}.page-intro>div{gap:8px}.page-intro .intro-copy{font-size:12px}.workspace{grid-template-columns:210px minmax(0,1fr);gap:10px}.sidebar{gap:10px}.panel{padding:12px}.panel-title{font-size:13px}.color-row{padding:7px;gap:6px}.color-chip{width:31px;min-width:31px;height:35px}.hex-input{font-size:13px}.color-row label.field-label{font-size:11px}.color-row .screen-picker{width:25px;min-width:25px;padding:4px}.preview-head{padding:8px 9px}.tab{font-size:11px;padding:6px 7px}.preview-stage{padding:9px}.preview-overlay{inset:9px;padding:8px}.preview-bottom{padding:8px 10px;font-size:11px;flex-wrap:wrap;gap:4px}.route-copy strong{font-size:11px}.route-map-canvas{max-width:155px;max-height:143px}.route-map-grid{gap:7px}.route-map-card{padding:5px 3px}.route-map-title{font-size:11px}.route-map-note{font-size:11px}.route-panel .lightness-tools{justify-content:flex-start;gap:5px 10px}.switch-label{font-size:11px}.toolbar>.button{font-size:11px}.samples-head .panel-title{font-size:13px}.inline-actions{gap:8px}.sample-count{font-size:11px}.samples-head .text-button{font-size:11px}.sample-grid{gap:8px 5px}.sample-hex{font-size:11px}.sample-pos{font-size:10px}.download-row{gap:8px}.download-row .button,.download-row .text-button{font-size:11px}.export-actions{gap:6px}.export-actions select{min-width:100%;font-size:12px}.export-actions .button{font-size:12px;min-height:35px}.advanced-grid{grid-template-columns:1fr 1fr}.editor-supplement>details>summary{font-size:12px;padding:11px 12px}.footer{padding:15px 16px}
}
@media(max-width:650px){
 .header-actions .header-link{display:none}.header-actions #reset{font-size:0;width:31px;min-width:31px;padding:6px}.header-actions #reset svg{width:16px;height:16px}.brand-copy{gap:0}.brand-caption{font-size:10px}.page-intro>div{display:block}.page-intro h1{font-size:23px}.page-intro .intro-copy{margin-top:4px}.workspace{grid-template-columns:1fr;gap:10px}.sidebar{display:flex;gap:10px}.sidebar>.panel{padding:13px}.sidebar>details.image-panel{padding:0}.sidebar .panel-head{margin-bottom:10px}.sidebar .panel-head .button{min-width:29px;width:29px;min-height:29px;padding:5px}.sidebar .panel-title{font-size:14px}.color-inputs{display:flex;gap:7px}.color-row{padding:8px;gap:9px}.color-chip{width:35px;min-width:35px;height:36px}.hex-input{font-size:14px}.color-row label.field-label{font-size:12px}.color-row .screen-picker{display:inline-flex;width:29px;min-width:29px;min-height:29px}.sidebar .tip{font-size:11px;line-height:1.6;margin-top:7px}.sidebar .active-color-note{display:none}.sidebar #add-color{width:auto;min-height:31px;margin-top:8px;padding:6px 11px}.image-panel>summary{font-size:12px}.image-drop{min-height:100px}.image-drop strong{font-size:12px}.image-drop span,.image-drop small{font-size:11px}.image-panel #image-picker{margin-top:0}.image-wrap{max-height:220px}.pick-target{font-size:11px;min-height:31px}.image-hint,.image-hint .text-button{font-size:11px}.extract-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.extract-controls label{font-size:11px}.extract-controls select{font-size:11px;min-height:34px}.extract-head strong{font-size:12px}.extract-apply{min-height:34px;font-size:12px}.extract-status{font-size:11px}
 .workbench{gap:10px}.panel{padding:13px}.preview-head{padding:8px 10px}.tab{font-size:12px;padding:6px 8px}.preview-stage{padding:9px}.preview-stage>canvas{max-height:230px;aspect-ratio:16/9}.preview-overlay{inset:9px}.preview-label{font-size:11px}.preview-bottom{padding:8px 11px;font-size:11px}.compare-grid{padding:9px;gap:7px}.compare-tile canvas{height:160px}.compare-caption{font-size:12px}.compare-caption span{font-size:11px}.route-panel .panel-title{font-size:14px}.route-panel .panel-head{margin-bottom:9px}.route-panel .route-options{gap:7px}.route-option{padding:6px}.route-mini{height:22px;margin-bottom:6px}.route-copy strong{font-size:12px}.route-panel .route-map-grid{gap:8px}.route-map-card{padding:7px 5px 5px}.route-map-title{font-size:12px;margin-bottom:3px}.route-map-canvas{max-width:160px;max-height:147px}.route-map-note{font-size:12px;line-height:1.6;margin-top:7px}.lightness-tools{gap:5px 15px!important}.switch-label{font-size:12px;min-height:28px}.check-toggle,.switch-label input[type=checkbox]{width:16px;height:16px;min-width:16px}.lightness-labels{font-size:11px}.lightness-panel{padding:8px 9px}.lightness-strip{height:18px;min-height:18px}.lightness-detail>summary{font-size:12px;padding:5px 0}.lightness-detail .tip{font-size:11px}.toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;margin-top:10px;padding-top:10px}.toolbar .control-group:first-child{grid-column:1/-1}.toolbar .angle-control{width:100%;min-width:0}.section-label{font-size:12px}.segmented button{font-size:12px;min-height:34px}.toolbar>.button{font-size:12px;min-height:33px}.advanced{margin-top:9px}.advanced summary{font-size:12px;padding:10px 11px}.advanced-grid{grid-template-columns:1fr 1fr;gap:10px;padding:0 11px 11px}.advanced .field-label{font-size:12px}.advanced-grid select{font-size:12px;min-height:36px}
 .samples-head{flex-direction:column;gap:8px;align-items:flex-start}.samples-head .panel-title{font-size:14px}.inline-actions{width:100%;justify-content:space-between}.sample-count,.samples-head .text-button{font-size:12px}.sample-count select{min-height:30px}.stops-panel #sample-tip{font-size:11px;line-height:1.6}.sample-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}.sample-color .sample-swatch{height:30px}.sample-hex{font-size:11px}.sample-pos{font-size:10px}.download-row{gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:9px}.download-row .button{font-size:11px;min-height:32px;padding:6px 8px}.download-row .text-button{font-size:11px}.export-bar{gap:8px;padding-top:10px;margin-top:10px}.export-bar>div:first-child>strong{font-size:12px}.export-actions{display:flex;flex-wrap:wrap;gap:7px;width:100%}.export-actions select{width:100%;max-width:none;min-height:36px;font-size:12px;min-width:100%}.export-actions .button{min-height:36px;font-size:12px;padding:8px 12px}.export-actions #download-png{flex:1}.export-note{font-size:11px;line-height:1.6;margin-top:8px}.editor-supplement{grid-template-columns:1fr;gap:9px;margin-top:11px}.editor-supplement>details>summary{font-size:13px;padding:12px 13px}.editor-supplement .preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-supplement .section-heading h2{font-size:15px}.editor-supplement .lesson-card h3{font-size:15px}.editor-supplement .lesson-card p{font-size:12px}.editor-supplement .preset-title{font-size:12px}.editor-supplement .preset-card small{font-size:11px}.footer{margin-top:13px;padding:14px 16px;gap:9px;align-items:flex-start}.footer>div:first-child{flex-direction:row;align-items:center;gap:8px}.footer strong{font-size:11px}.footer-brand-image{width:27px;height:27px}.footer-links{gap:8px 13px;flex-wrap:wrap}.footer-links>a,.footer-links>.text-button{font-size:11px}.share-corner{right:12px;bottom:12px;padding:7px 10px;font-size:11px;min-height:34px}.share-corner svg{width:13px;height:13px}.toast{bottom:62px;font-size:12px}
}
@media(max-width:380px){
 main,.main-shell,.page-shell{padding-left:12px;padding-right:12px}.site-header{padding-left:12px;padding-right:12px;gap:8px}.brand{gap:7px}.brand-name{font-size:13px}.brand-caption{font-size:10px}.header-actions .button{font-size:11px;padding:6px 7px}.panel,.sidebar>.panel{padding:12px}.route-panel .route-options{gap:5px}.route-option{padding:5px}.route-copy strong{font-size:12px}.route-mini{height:21px}.route-map-canvas{max-width:148px;max-height:136px}.download-row{gap:7px}.download-row .button{font-size:11px;padding:6px 7px}.download-row .button svg{width:13px;height:13px}.sample-grid{gap:7px}.sample-hex{font-size:11px}.extract-controls{gap:6px}.extract-controls select{font-size:11px;padding-left:5px;padding-right:19px}.footer{padding-left:12px;padding-right:12px}
}
@media(prefers-reduced-motion:reduce){.route-map-canvas,.route-option,.button{transition:none}}

/* Try the current palette on a real picture without leaving the preview. */
.preview-card #view-image{white-space:nowrap}
.image-preview,#image-preview{background:#141519;padding:10px;min-width:0}
.recolor-stage{position:relative;display:flex;align-items:center;justify-content:center;height:225px;min-width:0;background:#0e0f12;border:1px solid #2b2c33;border-radius:4px;overflow:hidden;isolation:isolate}
.recolor-stage #recolor-preview{display:block;width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:2/1;object-fit:contain;border-radius:0;background:#0e0f12}
.recolor-original-label,.recolor-result-label{position:absolute;z-index:2;top:9px;display:inline-flex;align-items:center;min-height:21px;padding:2px 7px;color:#f4f3f8;background:#15141cc7;border:1px solid #ffffff26;border-radius:3px;font-size:11px;line-height:1.5;pointer-events:none;backdrop-filter:blur(4px)}
.recolor-original-label{left:9px}.recolor-result-label{right:9px}
.recolor-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px;min-width:0}
.recolor-tools>.segmented{width:auto;flex:0 0 auto;padding:2px}
.recolor-tools>.segmented button{font-size:11px;min-height:30px;padding:5px 7px;white-space:nowrap}
.recolor-tools>label:not(.recolor-upload){flex:1 1 94px;min-width:90px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 7px;color:var(--ink-soft);font-size:11px;line-height:1.5;margin:0}
.recolor-tools label output{grid-column:2;grid-row:1;font:11px/1.5 Consolas,monospace;color:#c2bfd6;min-width:25px;text-align:right}
.recolor-tools label input[type=range]{grid-column:1/-1;grid-row:2;min-width:0;width:100%;margin:6px 0 3px;height:3px}
.recolor-upload{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 8px;min-height:32px;border:1px solid #42434d;border-radius:5px;background:#222329;color:#dddce7;font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;cursor:pointer;flex:0 0 auto}
.recolor-upload:hover{background:#2b2c33;border-color:#777185}.recolor-upload:focus-visible{outline:2px solid #b2aee8;outline-offset:3px}
.recolor-upload svg{width:13px;height:13px}
.recolor-tools #download-recolor{min-height:32px;font-size:11px;padding:6px 8px;gap:5px;flex:0 0 auto}
.recolor-tools #download-recolor svg{width:13px;height:13px}
.recolor-hint{flex:1 1 100%;font-size:11px;line-height:1.6;color:var(--muted);margin:0;overflow-wrap:anywhere}
.recolor-secondary{flex:1 1 100%;width:100%;min-width:0;margin:7px 0 0;border-top:1px solid #2b2c33;padding-top:3px}
details.recolor-secondary>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#aaa8bb;font-size:11px;line-height:1.5;padding:4px 0;cursor:pointer}
details.recolor-secondary>summary::-webkit-details-marker{display:none}
details.recolor-secondary>summary::after{content:"+";color:#a4a0b7;font-size:15px;line-height:1}
details.recolor-secondary[open]>summary::after{content:"−"}
.recolor-secondary>label,.recolor-secondary-controls>label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 8px;min-width:0;font-size:11px;line-height:1.5;color:var(--ink-soft);margin:6px 0 0}
.recolor-secondary>label input[type=range],.recolor-secondary-controls>label input[type=range]{grid-column:1/-1;grid-row:2;width:100%;min-width:0;margin:7px 0 4px}
.recolor-secondary>label output,.recolor-secondary-controls>label output{grid-column:2;grid-row:1;font:11px/1.5 Consolas,monospace;color:#c2bfd6;text-align:right}
.recolor-secondary .recolor-hint{margin-top:6px}
.recolor-secondary-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.recolor-divider{position:absolute;inset-block:0;left:50%;width:1px;z-index:1;background:#ffffffb3;box-shadow:0 0 0 1px #0002;pointer-events:none}
.recolor-stage:fullscreen{width:100%;height:100%;border:0;border-radius:0;background:#0e0f12}.recolor-stage:fullscreen #recolor-preview{width:100%;height:100%;object-fit:contain}
@media(min-width:1600px){.recolor-stage{height:240px}}
@media(min-width:1020px) and (max-width:1359px){.recolor-stage{height:210px}.preview-head .view-tabs{gap:0}.preview-head .tab{padding-left:8px;padding-right:8px}.preview-actions>span{display:none}.recolor-tools{gap:6px}.recolor-tools>.segmented button{padding-left:6px;padding-right:6px}.recolor-tools>label:not(.recolor-upload){flex-basis:86px;min-width:80px}.recolor-upload,.recolor-tools #download-recolor{padding-left:7px;padding-right:7px}}
@media(max-width:1019px){.recolor-stage{height:210px}.recolor-tools>.segmented button{font-size:11px}.recolor-tools>label:not(.recolor-upload){font-size:11px}.recolor-secondary-controls{gap:10px}}
@media(max-width:760px){.image-preview,#image-preview{padding:9px}.recolor-stage{height:180px}.preview-head .tab{font-size:11px;padding-left:6px;padding-right:6px}.preview-head .preview-actions{gap:4px}.recolor-tools{gap:6px}.recolor-tools>.segmented{flex:1 1 auto}.recolor-tools>label:not(.recolor-upload){flex:1 1 96px;min-width:90px}.recolor-upload,.recolor-tools #download-recolor{flex:1 1 auto}.recolor-secondary-controls{grid-template-columns:1fr;gap:0}}
@media(max-width:650px){.recolor-stage{height:160px}.preview-head .tab{font-size:12px;padding-left:8px;padding-right:8px}.recolor-tools>.segmented{flex:0 0 auto}.recolor-tools>.segmented button{font-size:12px;min-height:32px;padding-left:7px;padding-right:7px}.recolor-tools>label:not(.recolor-upload){font-size:12px;min-width:100px}.recolor-upload,.recolor-tools #download-recolor{font-size:12px;min-height:33px;flex:1 1 calc(50% - 6px)}.recolor-hint,details.recolor-secondary>summary,.recolor-secondary>label,.recolor-secondary-controls>label{font-size:11px}.recolor-original-label,.recolor-result-label{font-size:11px;top:7px}.recolor-original-label{left:7px}.recolor-result-label{right:7px}.recolor-secondary-controls{grid-template-columns:1fr 1fr;gap:10px}}
@media(max-width:380px){.preview-head .tab{font-size:12px;padding-left:7px;padding-right:7px}.recolor-tools{gap:6px}.recolor-tools>.segmented button{padding-left:6px;padding-right:6px}.recolor-tools>label:not(.recolor-upload){min-width:92px}.recolor-secondary-controls{grid-template-columns:1fr;gap:0}}

/* Give the editable color wheels room; every surrounding card follows its grid. */
.workspace,.sidebar,.workbench,.panel,.preview-card,.route-panel,.stops-panel,.route-map-grid,.route-map-card,.route-option,.preset-card,.lesson-card,.contact-card,.editor-supplement,.editor-supplement>details,.lightness-panel,.image-preview,.recolor-stage,.recolor-tools,.recolor-secondary,.recolor-secondary-controls{min-width:0;max-width:100%}
.sidebar>.panel,.workbench>.panel,.workbench>.preview-card,.editor-supplement>details{width:100%}
.panel-head,.samples-head,.preview-head,.preview-bottom,.control-group,.route-copy,.route-map-title,.inline-actions,.export-actions,.download-row,.export-bar,.color-row,.color-inputs{min-width:0;max-width:100%}
.color-row>div,.extra-color-row>.middle-color-fields{min-width:0}
.export-actions select,.advanced select,.extract-controls select,.selected-stop-editor input,.hex-input{min-width:0;max-width:100%}
.route-map-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.route-map-card{padding:7px 2px 4px;align-self:start}
.route-map-canvas{display:block;width:100%;height:auto;max-width:190px;max-height:none;aspect-ratio:1;margin:0 auto;touch-action:none}
@media(min-width:1020px) and (max-width:1359px){
 .workspace{grid-template-columns:220px minmax(0,1fr)}
 .workbench{grid-template-columns:minmax(280px,1fr) 380px}
 .route-panel{padding:10px}
 .route-panel .route-map-grid{gap:8px}
 .route-map-card{padding-left:2px;padding-right:2px}
 .route-map-canvas{max-width:190px;max-height:none;aspect-ratio:1}
}
@media(min-width:1360px){
 .workbench{grid-template-columns:minmax(280px,1fr) 420px}
 .route-panel{padding:12px}
 .route-map-card{padding-left:2px;padding-right:2px}
 .route-map-canvas{max-width:190px;max-height:none;aspect-ratio:1}
}
@media(max-width:1019px){
 .route-map-card{padding-left:3px;padding-right:3px}
 .route-map-canvas{max-width:190px;max-height:none;aspect-ratio:1}
}
@media(max-width:650px){
 .route-panel .route-map-grid{gap:8px}
 .route-map-card{padding:7px 2px 4px}
 .route-map-canvas{max-width:190px;max-height:none;aspect-ratio:1}
 .recolor-stage #recolor-preview{min-width:0;max-width:100%}
 .export-actions,.inline-actions,.download-row{flex-wrap:wrap}
 .contact-card img{max-width:100%;height:auto;aspect-ratio:1;object-fit:contain}
}
@media(max-width:380px){.route-map-canvas{max-width:145px;max-height:none;aspect-ratio:1}}

/* Directly drag the original / recolored picture boundary. */
button.recolor-divider{position:absolute;inset:auto;top:0;left:50%;height:100%;width:34px;min-width:34px;z-index:3;display:block;transform:translateX(-50%);padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#25242b;cursor:ew-resize;touch-action:none;pointer-events:auto;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;overflow:visible}
button.recolor-divider::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%);background:#fffffff2;box-shadow:0 0 0 1px #15131d36;pointer-events:none}
.recolor-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:30px;height:27px;padding:0 0 2px;border:1px solid #ffffffcf;border-radius:6px;background:#f5f4f8f2;box-shadow:0 2px 8px #0b0a1438;color:#393640;font:600 20px/1 system-ui,sans-serif;letter-spacing:1px;white-space:nowrap;pointer-events:none;transition:background .12s,box-shadow .12s}
button.recolor-divider:hover .recolor-handle,button.recolor-divider:active .recolor-handle{background:#fff;box-shadow:0 2px 11px #0b0a1455}
button.recolor-divider:focus-visible{outline:none}
button.recolor-divider:focus-visible .recolor-handle{outline:3px solid #b2aee8;outline-offset:3px;box-shadow:0 2px 12px #0b0a1455}
button.recolor-divider:focus-visible::before{width:2px;box-shadow:0 0 0 1px #847fb77a}
button.recolor-divider[hidden],.recolor-divider[hidden]{display:none!important}
@media(pointer:coarse){button.recolor-divider{width:36px;min-width:36px}.recolor-handle{width:32px;height:30px}}

/* Small, local examples stay inside the picture preview. */
.recolor-examples{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;min-width:0;max-width:100%;margin:8px 0 0;padding:1px;overflow:hidden}
.recolor-example{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-width:0;max-width:100%;min-height:62px;margin:0;padding:4px 3px;border:1px solid #34353f;border-radius:5px;background:#1c1d22;color:#aaaab5;cursor:pointer;transition:border-color .12s,background .12s,color .12s;touch-action:manipulation}
.recolor-example img{display:block;width:100%;max-width:78px;height:auto;max-height:44px;aspect-ratio:16/9;object-fit:cover;border-radius:2px;pointer-events:none}
.recolor-example span{display:block;min-width:0;max-width:100%;font-size:11px;font-weight:500;line-height:1.5;white-space:nowrap;text-align:center;pointer-events:none}
.recolor-example:hover{background:#25242e;border-color:#706a88;color:#e6e3f0}
.recolor-example.selected,.recolor-example[aria-pressed=true]{border-color:#807db9;background:#2a2835;color:#e1ddf5;box-shadow:0 0 0 1px #807db92e}
.recolor-example:focus-visible{outline:2px solid #b2aee8;outline-offset:-2px;border-color:#b2aee8}
#recolor-show-full{pointer-events:auto;cursor:pointer;font-family:inherit;z-index:4}
#recolor-show-full:hover{background:#272334e6;border-color:#c1b9e3}
#recolor-show-full:focus-visible{outline:2px solid #b2aee8;outline-offset:2px}
.recolor-map-guide{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:7px;color:var(--muted);font-size:11px;line-height:1.5}
.recolor-map-guide canvas{width:100%;height:10px;border-radius:2px}
@media(max-width:650px){
 .recolor-examples{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74px;justify-content:start;gap:6px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#55505f transparent;-webkit-overflow-scrolling:touch;padding:1px 1px 4px;scroll-snap-type:x proximity}
 .recolor-example{min-height:63px;padding:4px 3px;scroll-snap-align:start}
 .recolor-example img{max-width:78px;width:100%;height:auto;max-height:44px;aspect-ratio:16/9}
 .recolor-example span{font-size:11px}
}