:root { color-scheme: light; --ink:#17312f; --muted:#5e706e; --brand:#176c5d; --brand-dark:#105246; --surface:#fff; --canvas:#e7ecea; --line:#d9e1df; --danger:#a83c3c; --danger-bg:#fff3f2; --shadow:0 12px 35px rgba(21,53,48,.1); }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; overflow-x:hidden; background:#f4f7f6; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif; -webkit-font-smoothing:antialiased; }
.sim-site-header { width:min(100%,1024px); min-height:72px; margin:0 auto; padding:max(12px,env(safe-area-inset-top)) 20px 12px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); }
.sim-brand { min-width:0; display:flex; align-items:center; gap:10px; color:#12324a; text-decoration:none; }
.sim-brand img { width:48px; height:48px; flex:none; object-fit:contain; }
.sim-brand span { min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.sim-brand strong { font-size:1rem; white-space:nowrap; }
.sim-brand strong small { font-size:.72rem; }
.sim-brand em { margin-top:3px; color:#536575; font-size:.72rem; font-style:normal; font-weight:700; }
.sim-home-link { padding:10px 14px; flex:none; color:#fff; background:#12324a; border-radius:7px; font-size:.78rem; font-weight:800; text-decoration:none; }
button,input { font:inherit; } button { -webkit-tap-highlight-color:transparent; }
.simulator { width:min(100%,1024px); margin:0 auto; padding:max(28px,env(safe-area-inset-top)) 20px max(32px,env(safe-area-inset-bottom)); overflow-x:clip; }
.page-header { margin-bottom:24px; }.eyebrow { margin:0 0 7px; color:var(--brand); font-size:.76rem; font-weight:800; letter-spacing:.12em; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:8px; font-size:clamp(1.65rem,5vw,2.2rem); line-height:1.3; letter-spacing:.02em; } h2 { margin-bottom:0; font-size:1.05rem; } h3 { margin:0; font-size:1rem; }.intro { margin-bottom:0; color:var(--muted); font-size:.96rem; line-height:1.7; }
.workspace { padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }.simulator:not(.has-image) .editor-only { display:none!important; }.workspace-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }.status { margin-bottom:0; color:var(--muted); font-size:.82rem; line-height:1.5; text-align:right; }
.canvas-shell { position:relative; min-height:360px; height:min(68vh,620px); overflow:hidden; border:1px solid #ced8d5; border-radius:13px; background:var(--canvas); }.canvas-shell:has(#editorCanvas) { touch-action:none; } #editorCanvas { display:block; width:100%; height:100%; cursor:crosshair; touch-action:none; }.simulator.is-auto-mode .canvas-shell:has(#editorCanvas),.simulator.is-auto-mode #editorCanvas { touch-action:pan-y; }.simulator.is-pan-mode #editorCanvas { cursor:grab; }.simulator.is-pan-mode #editorCanvas:active { cursor:grabbing; }
.empty-state { position:absolute; inset:0; display:grid; place-content:center; gap:12px; padding:28px; background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(234,246,241,.92)); color:var(--muted); text-align:center; }.empty-state[hidden] { display:none; }.empty-state strong { max-width:26rem; color:var(--ink); font-size:clamp(1.05rem,3.6vw,1.3rem); line-height:1.55; }.empty-icon { display:grid; width:58px; height:58px; place-items:center; margin:0 auto 2px; border:2px dashed #6fa596; border-radius:50%; color:var(--brand); font-size:2.2rem; font-weight:300; }.choose-photo-button,.sample-photo-button { display:inline-flex; min-width:min(100%,260px); min-height:54px; align-items:center; justify-content:center; margin:2px auto 0; padding:12px 24px; border:0; border-radius:11px; font:inherit; font-size:1rem; font-weight:800; text-decoration:none; cursor:pointer; }.choose-photo-button { background:var(--brand); color:#fff; box-shadow:0 5px 12px rgba(16,82,70,.22); }.sample-photo-button { min-height:48px; border:1px solid #7ca99c; background:#fff; color:var(--brand-dark); box-shadow:none; }.upload-note { max-width:30rem; font-size:.86rem; line-height:1.55; }#imageInput { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.sample-notice { position:absolute; z-index:2; top:12px; right:12px; left:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px 9px 12px; border:1px solid rgba(18,60,55,.2); border-radius:10px; background:rgba(255,255,255,.94); box-shadow:0 3px 12px rgba(8,31,27,.14); color:#284942; font-size:.78rem; font-weight:800; line-height:1.4; }.sample-notice[hidden] { display:none; }.sample-notice button { flex:0 0 auto; min-height:34px; border:0; border-radius:7px; padding:7px 9px; background:var(--brand); color:#fff; font:inherit; font-size:.75rem; font-weight:800; cursor:pointer; }
.brush-guide { display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:3px; margin-top:12px; padding:12px 15px; border:1px solid rgba(54,132,111,.35); border-radius:12px; background:#eff9f4; box-shadow:0 3px 10px rgba(18,68,57,.08); }.brush-guide p { grid-row:span 2; margin:2px 0 0; color:var(--brand-dark); font-size:1.02rem; font-weight:900; letter-spacing:.06em; white-space:nowrap; }.brush-guide strong { font-size:clamp(1.08rem,2.3vw,1.25rem); line-height:1.45; }.brush-guide span { color:#3e625b; font-size:.92rem; line-height:1.45; }
.photo-controls,.brush-panel,.color-panel { margin-top:16px; }.control-label { margin-bottom:9px; color:var(--muted); font-size:.78rem; font-weight:800; }.button-row,.tool-row,.brush-size-row,.brush-edit-row,.color-reset-row { display:flex; flex-wrap:wrap; gap:9px; }.button { display:inline-flex; min-height:46px; align-items:center; justify-content:center; border:1px solid transparent; border-radius:10px; padding:10px 15px; font-weight:750; line-height:1.2; cursor:pointer; transition:background-color 160ms ease,border-color 160ms ease,transform 160ms ease; }.button:active:not(:disabled) { transform:translateY(1px); }.button:focus-visible { outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px #0b5e9a; }.button:disabled { cursor:not-allowed; opacity:.42; }.button-secondary { border-color:#cbd8d5; background:#fff; color:var(--ink); }.button-danger { border-color:#edc5c1; background:var(--danger-bg); color:var(--danger); }.button-primary,.button-save { background:var(--brand); color:#fff; }.button-primary:hover,.button-save:not(:disabled):hover { background:var(--brand-dark); }.icon-button { width:44px; padding:8px; font-size:1.45rem; }
.brush-panel { padding:15px; border:1px solid #b9d7ce; border-radius:13px; background:#f4fbf8; }.brush-panel h3 { margin-bottom:12px; }.tool-button { min-height:54px; flex:1 1 145px; }.tool-button small,.brush-size-button small { display:block; margin-top:3px; font-size:.68rem; font-weight:800; }.tool-action { border-width:2px; border-color:#9bc8ba; background:#fff; }.tool-pan { flex-basis:100%; min-height:46px; color:#45615c; }.tool-button.is-selected,.brush-size-button.is-selected { border:2px solid var(--brand); background:var(--brand); color:#fff; box-shadow:0 3px 0 var(--brand-dark); }.quick-fix-guide { margin:11px 0 0; padding:9px 10px; border-radius:9px; background:#e4f4ed; color:#376f63; font-size:.82rem; line-height:1.55; }.quick-fix-guide strong { color:var(--brand-dark); }.brush-size-row { align-items:center; margin-top:13px; }.brush-size-row>span { flex:1 1 100%; color:var(--muted); font-size:.82rem; font-weight:800; }.brush-size-button { min-width:70px; min-height:52px; flex:1 1 70px; }.brush-size-small { border-bottom-width:3px; }.brush-size-medium { border-bottom-width:5px; }.brush-size-large { border-bottom-width:7px; }.brush-edit-row { margin-top:13px; }.brush-edit-row .button { flex:1 1 160px; }.panel-description { margin:10px 0 0; color:var(--muted); font-size:.85rem; line-height:1.55; }
.color-panel { padding:16px; border:1px solid #d8e0dd; border-radius:13px; background:#fbfdfc; }.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }.panel-heading .control-label { margin-bottom:3px; }.mode-badge { flex:0 0 auto; border-radius:999px; padding:6px 9px; background:#e9eceb; color:#596561; font-size:.72rem; font-weight:800; }.color-palette { overflow:hidden; margin-top:12px; border:1px solid #d8e0dd; border-radius:12px; background:#fff; }.color-group { margin:0; padding:11px 12px; border-bottom:1px solid #e3e9e7; }.color-group:last-child { border-bottom:0; }.color-group-toggle { display:flex; width:100%; min-height:42px; align-items:center; justify-content:space-between; border:0; padding:0 2px; background:transparent; color:#314844; font:inherit; font-size:.86rem; font-weight:800; text-align:left; cursor:pointer; }.color-group-toggle span { color:var(--brand); font-size:1.25rem; line-height:1; transition:transform 160ms ease; }.color-group.is-collapsed .color-group-toggle span { transform:rotate(-90deg); }.color-group.is-collapsed .color-grid { display:none; }.color-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:9px; }.color-choice { position:relative; display:flex; min-height:94px; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:1px solid #cbd8d5; border-radius:10px; padding:8px; background:#fff; color:var(--ink); font-size:.78rem; font-weight:800; cursor:pointer; }.color-choice.is-selected { border:3px solid var(--brand); background:#e9f5f1; color:var(--brand-dark); }.color-choice.is-selected::after { position:absolute; top:-9px; right:-7px; display:grid; width:23px; height:23px; place-items:center; border:2px solid #fff; border-radius:50%; background:var(--brand); color:#fff; content:"✓"; font-size:.85rem; font-weight:900; }.color-choice:disabled { cursor:not-allowed; opacity:.42; }.swatch { width:100%; height:47px; flex:0 0 47px; border:1px solid rgba(23,49,47,.28); border-radius:7px; box-shadow:inset 0 1px 1px rgba(255,255,255,.25); }.color-adjustments { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:15px; }.range-control { display:grid; gap:7px; color:var(--ink); font-size:.82rem; font-weight:800; }.range-control span { display:flex; justify-content:space-between; gap:8px; }.range-control output { color:var(--brand-dark); font-variant-numeric:tabular-nums; }.range-control input { width:100%; accent-color:var(--brand); }.color-debug { margin-top:12px; border:1px dashed #b8c9c4; border-radius:9px; padding:8px 10px; color:var(--muted); font-size:.78rem; }.color-debug summary { color:var(--ink); font-weight:800; cursor:pointer; }.color-debug p { display:flex; align-items:center; gap:8px; margin:9px 0 0; }.color-debug span { width:24px; height:24px; border:1px solid #8fa39d; border-radius:5px; }.color-debug code { color:var(--brand-dark); font-weight:800; }.color-reset-row { margin-top:14px; }
.presentation-actions { display:flex; gap:9px; margin-top:16px; }.button-presentation { width:100%; min-height:52px; border-color:#95c4b7; background:#edf8f4; color:var(--brand-dark); }.bottom-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }.preview-button { flex:1 1 120px; border:2px solid #cbd8d5; background:#fff; color:var(--ink); }.preview-button.is-selected { border-color:var(--brand-dark); background:var(--brand); color:#fff; box-shadow:0 3px 0 var(--brand-dark); }.button-save { min-height:48px; flex:1 1 180px; }.action-hint { margin:8px 1px 0; color:var(--muted); font-size:.78rem; line-height:1.45; }
.save-preview { margin-top:12px; border:1px solid #b9d7ce; border-radius:12px; padding:12px; background:#f4fbf8; }.save-preview img { display:block; width:100%; max-height:62dvh; border-radius:8px; object-fit:contain; background:#e7ecea; }.save-preview p { margin:10px 0 0; color:#315d54; font-size:.9rem; font-weight:800; line-height:1.55; text-align:center; }.save-debug { margin-top:10px; border:1px dashed #b8c9c4; border-radius:9px; padding:8px 10px; color:var(--muted); font-size:.76rem; }.save-debug summary { color:var(--ink); font-weight:800; cursor:pointer; }.save-debug dl { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:10px 0 0; }.save-debug dl div { display:contents; }.save-debug dt { font-weight:800; }.save-debug dd { min-width:0; margin:0; overflow-wrap:anywhere; color:#315d54; }
.simulator.is-presentation { position:fixed; z-index:20; inset:0; width:100%; max-width:none; padding:0; overflow:hidden; background:#0e1716; }.is-presentation .page-header,.is-presentation .workspace-heading,.is-presentation .brush-guide,.is-presentation .photo-controls,.is-presentation .brush-panel,.is-presentation .color-panel,.is-presentation .bottom-actions,.is-presentation .action-hint,.is-presentation #presentationButton { display:none; }.is-presentation .workspace { position:relative; height:100%; padding:0; border:0; border-radius:0; background:#0e1716; box-shadow:none; }.is-presentation .canvas-shell { min-height:0; height:calc(100dvh - 82px); border:0; border-radius:0; background:#0e1716; }.is-presentation #editorCanvas { pointer-events:none; cursor:default; }.is-presentation .presentation-actions { position:absolute; right:0; bottom:0; left:0; z-index:1; margin:0; padding:14px max(16px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background:linear-gradient(transparent,rgba(0,0,0,.8) 38%); }.is-presentation #editReturnButton { display:inline-flex; width:100%; min-height:54px; }
@media (max-width:680px) { .simulator { width:100%; padding-right:12px; padding-left:12px; }.workspace { padding:12px 12px 92px; border-radius:14px; }.workspace:not(.has-image) { padding-bottom:12px; }.workspace-heading { display:block; }.status { margin-top:5px; text-align:left; }.canvas-shell { min-height:290px; height:min(57dvh,510px); }.workspace:not(.has-image) .canvas-shell { min-height:340px; height:min(58dvh,480px); }.empty-state { padding:22px 18px; gap:13px; }.empty-state strong { max-width:18rem; font-size:1.15rem; }.choose-photo-button,.sample-photo-button { width:min(100%,290px); min-height:56px; }.sample-photo-button { min-height:50px; }.sample-notice { top:8px; right:8px; left:8px; padding:8px; font-size:.72rem; }.sample-notice button { min-height:32px; padding:6px 7px; font-size:.7rem; }.brush-guide { column-gap:10px; padding:11px 12px; }.brush-guide strong { font-size:1.125rem; }.brush-guide span { font-size:.88rem; }.button { min-height:54px; padding:12px 13px; }.button-row .button:not(.icon-button) { flex:1 1 142px; }.icon-button { width:54px; }.brush-panel,.color-panel { padding:14px; }.tool-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.tool-button { min-width:0; min-height:64px; padding:8px 5px; font-size:.8rem; }.tool-pan { grid-column:1 / -1; min-height:52px; }.quick-fix-guide { font-size:.84rem; }.brush-size-button { min-height:56px; }.color-palette { overflow:visible; border:0; background:transparent; }.color-group { padding:12px 0; border-bottom:1px solid #dfe7e4; }.color-group-toggle { min-height:50px; font-size:.92rem; }.color-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding-top:3px; }.color-choice { min-width:0; min-height:84px; font-size:.8rem; }.swatch { height:38px; flex-basis:38px; }.color-adjustments { grid-template-columns:1fr; gap:12px; }.bottom-actions { position:fixed; z-index:10; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:12px max(12px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); border-top:1px solid var(--line); background:rgba(244,247,246,.96); backdrop-filter:blur(8px); }.bottom-actions .button { width:100%; min-width:0; min-height:54px; padding:10px 5px; font-size:.78rem; } }
@media (max-width:390px) { .canvas-shell { min-height:300px; }.tool-button { font-size:.72rem; }.tool-row { gap:6px; } }

/* 自動選択の進行状況を、iPhoneでもひと目で確認できる表示にする */
.auto-select-status { display:inline-grid; gap:2px; min-height:32px; margin:10px 0 0; border-radius:12px; padding:7px 11px; background:#dff1ea; color:#176c5d; font-size:.82rem; line-height:1.35; }.auto-select-status strong { font-weight:900; }.auto-select-status span { color:#376f63; font-size:.76rem; font-weight:750; }

/* スマートフォンでも選択中のカラーが一瞬で分かる、太い枠と浮き上がり表現 */
.color-choice { transition:transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.color-choice.is-selected { z-index:1; border-width:4px; transform:translateY(-2px) scale(1.035); box-shadow:0 7px 16px rgba(23,108,93,.25), inset 0 0 0 1px #fff; }
.color-choice.is-selected .swatch { box-shadow:0 0 0 2px rgba(23,108,93,.2), inset 0 1px 1px rgba(255,255,255,.25); }

@media (max-width:680px) {
  .sim-site-header { min-height:64px; padding:calc(8px + env(safe-area-inset-top)) 12px 8px; gap:8px; }
  .sim-brand { gap:7px; }
  .sim-brand img { width:40px; height:40px; }
  .sim-brand strong { font-size:.86rem; }
  .sim-brand strong small { display:none; }
  .sim-brand em { font-size:.65rem; }
  .sim-home-link { padding:9px 10px; font-size:.7rem; }
}


/* 2026-09: カラーシミュレーターの簡易操作レイアウト */

:root{--ink:#183b37;--muted:#536b65;--brand:#176c5d;--surface:#fff;--line:#d9e2dd}
body{background:#f7f8f4;font-size:16px}
[hidden],.internal-elements,.color-debug,.save-debug{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.preview-banner{padding:7px 20px;background:#e9eee7;color:#4e6258;font-size:12px;text-align:center;letter-spacing:.04em}.preview-banner span{margin-left:16px}
.preview-header{max-width:1240px;margin:auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}.preview-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}.preview-brand strong{font-size:21px}.preview-brand small{display:block;font-size:11px;letter-spacing:.12em}.original-link{font-size:13px;color:var(--muted);text-underline-offset:5px}
.simulator{width:min(100%,1240px);padding:22px 24px 40px;overflow:visible}
.page-header{margin:0 0 28px}.eyebrow{font-size:12px;letter-spacing:.12em}.eyebrow span{display:inline-block;margin-left:15px;border:1px solid #c4d3c7;border-radius:5px;padding:4px 8px;letter-spacing:0;font-weight:600}
h1{font-size:clamp(27px,3.2vw,40px);line-height:1.45;letter-spacing:.025em;margin:9px 0 10px;font-weight:800}.mobile-break{display:none}.intro{font-size:16px}.simple-steps{display:flex;list-style:none;padding:0;gap:26px;margin:20px 0 16px;font-size:14px;font-weight:700}.simple-steps li{display:flex;align-items:center;gap:8px}.simple-steps span{display:grid;place-items:center;width:25px;height:25px;background:#e5ece1;border-radius:50%;font-size:12px}.early-help{font-size:14px;color:#315c50;text-underline-offset:4px;line-height:1.8}
.workspace{padding:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px;align-items:start;border:0;background:transparent;box-shadow:none;overflow:visible}.viewer-panel{position:sticky;top:16px;background:#fff;border:1px solid #d9e2dd;border-radius:16px;padding:14px;box-shadow:0 12px 30px #243e3410;z-index:3;min-width:0}
.photo-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:1px 0 12px;font-size:13px}.photo-toolbar>div{margin-right:auto;display:flex;align-items:center;gap:6px}.live-dot{width:7px;height:7px;border-radius:50%;background:#589771}.photo-toolbar button{border:1px solid #b8cdbf;background:#f5f8f2;color:#265449;min-height:40px;padding:7px 12px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer}
.canvas-shell,.workspace:not(.has-image) .canvas-shell{height:clamp(300px,42vw,455px);min-height:0;background:#eef0eb;border:0;border-radius:10px}.stage-label{position:absolute;bottom:10px;left:10px;padding:6px 10px;border-radius:6px;background:#fffffff2;font-size:12px;font-weight:700;pointer-events:none;box-shadow:0 2px 5px #0001}#sampleNotice{display:none!important}
.selection-guide{display:flex;gap:8px;align-items:center;margin:10px 0}.selection-guide p{flex:1;font-size:13px;line-height:1.6;margin:0}.selection-guide button{border:1px solid #cad7ce;border-radius:7px;background:#fff;color:#34584d;min-height:42px;padding:8px 12px;white-space:nowrap;cursor:pointer}.selection-guide button:disabled{opacity:.4}
.bottom-actions{position:static;display:grid;grid-template-columns:.9fr 1.2fr 1fr;gap:7px;padding:0;margin:0;border:0;background:transparent;backdrop-filter:none}.bottom-actions .button{padding:10px 5px;font-size:13px;min-height:48px}.bottom-actions .is-selected{border-color:#396f5d;background:#e7f1e9;color:#1e5142}
.photo-footnote{font-size:12px;color:#596e61;margin:10px 0 0;text-align:center}.load-error{color:#a03b31;background:#fff0ed;padding:12px;font-size:14px}
.editor-panel{min-width:0}.color-panel{background:white;border:1px solid var(--line);border-radius:15px;padding:22px;margin:0}.color-panel h2{font-size:20px;line-height:1.55}.control-label{font-size:13px;line-height:1.6;margin-bottom:5px}.selected-line{font-size:13px;margin:16px 0 12px;color:var(--muted)}.selected-line strong{color:#1d5746;margin-left:10px}.starter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.starter-choice{min-width:0;min-height:98px;font-size:13px;padding:9px 5px;line-height:1.35}.swatch{height:44px;flex-basis:44px;width:100%;border-radius:5px}.color-choice.is-selected{transform:none;border-width:3px;box-shadow:0 0 0 2px #d6e8dc}.color-choice.is-selected::after{right:-5px;top:-6px}.more-colors{margin-top:18px;border-top:1px solid var(--line);padding-top:3px}.more-colors>summary{min-height:50px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:14px;color:#315d4b;cursor:pointer;list-style:none}.more-colors summary::-webkit-details-marker,.fine-adjustments summary::-webkit-details-marker{display:none}.color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.color-palette{border:0;margin:0}.color-group{padding:8px 0}.color-group-toggle{font-size:14px;min-height:46px}.panel-description{font-size:13px;line-height:1.7}
.fine-adjustments{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 18px 0}.fine-adjustments>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:78px;font-size:15px;font-weight:700;list-style:none;cursor:pointer}.fine-adjustments summary small{display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:4px}.fine-adjustments[open]{padding-bottom:18px}.fine-adjustments .brush-panel{padding:12px}.fine-adjustments .brush-guide{display:none}.sensitivity{display:grid;gap:8px;margin-top:18px;font-size:14px;font-weight:700}.sensitivity select{font:inherit;color:var(--ink);padding:12px;border:1px solid #bccfc2;border-radius:8px;background:#fff;width:100%}.tool-button{font-size:14px}.tool-button small{font-size:12px}.button:focus-visible,.color-choice:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #2b77ba;outline-offset:3px}
.privacy-note{font-size:12px;line-height:1.7;margin:15px 3px;color:var(--muted)}.consult-card{background:#eaf0e6;border-radius:13px;padding:23px}.consult-card h2{font-size:20px;line-height:1.5}.consult-card p:not(.control-label){font-size:14px;line-height:1.8;margin:12px 0}.consult-card a{display:block;background:#176c5d;color:white;text-decoration:none;padding:14px 10px;text-align:center;border-radius:8px;font-size:14px;font-weight:700;line-height:1.6}
.result-section{margin:38px 0 16px;border-top:1px solid #d0dcd1;padding-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:40px}.result-section h2{font-size:25px;line-height:1.5}.result-section p{line-height:1.8;font-size:14px}.result-section .eyebrow{font-size:12px}.result-buttons{display:grid;gap:9px}.result-buttons button,.result-buttons a{display:block;padding:16px;border:1px solid #176c5d;border-radius:8px;text-decoration:none;text-align:center;font:inherit;font-weight:700;background:white;color:#176c5d;cursor:pointer}.result-buttons a{background:#176c5d;color:white}.result-note,#color-consult-status{color:var(--muted);font-size:13px!important}.action-hint{font-size:13px}.preview-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:15px 24px;border-top:1px solid #d0dcd1;padding:25px 20px;font-size:13px;line-height:1.8}.preview-footer a{color:var(--ink)}
@media(max-width:760px){
.preview-header{padding:12px 14px}.preview-brand strong{font-size:18px}.preview-brand img{width:36px;height:36px}.original-link{font-size:11px}.preview-banner{font-size:11px;padding:6px 12px}
.simulator{padding:14px 12px 30px}.page-header{margin-bottom:20px}.mobile-break{display:block}h1{font-size:27px;line-height:1.45}.intro{font-size:14px}.simple-steps{gap:12px;font-size:12px;margin:14px 0}.simple-steps li{gap:5px}.simple-steps span{width:22px;height:22px}.early-help{font-size:13px}
.workspace{display:block;padding:0!important}.viewer-panel{top:0;margin:0 -4px 16px;padding:9px;border-radius:11px;box-shadow:0 8px 16px #243e3420}
.canvas-shell,.workspace:not(.has-image) .canvas-shell{height:clamp(185px,30svh,290px);min-height:0;border-radius:7px}.photo-toolbar{font-size:12px;padding-bottom:8px;gap:5px}.photo-toolbar button{font-size:12px;min-height:36px;padding:6px 8px}.stage-label{font-size:11px;padding:4px 8px;bottom:6px;left:6px}.selection-guide{margin:7px 0;gap:5px}.selection-guide p{font-size:12px;line-height:1.5}.selection-guide button{min-height:36px;font-size:12px;padding:6px 8px}.bottom-actions{position:static;padding:0;gap:5px}.bottom-actions .button{font-size:11px;min-height:42px;padding:7px 2px}.photo-footnote{display:none}
.color-panel{padding:17px 14px}.color-panel h2{font-size:18px}.control-label{font-size:12px}.selected-line{margin:8px 0 12px}.starter-grid{gap:9px}.starter-choice{font-size:12px;min-height:80px;padding:6px 4px}.swatch{height:33px;flex-basis:33px}.color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.color-choice{font-size:12px;min-height:80px}
.fine-adjustments{padding:0 13px}.fine-adjustments>summary{font-size:14px}.tool-button{font-size:12px!important}.tool-row{grid-template-columns:repeat(2,minmax(0,1fr))}.button-row .button:not(.icon-button){flex:1 1 98px}.brush-edit-row .button{font-size:13px}.photo-controls .button{font-size:13px}.consult-card{padding:20px}.result-section{display:block;margin-top:28px;padding-top:23px}.result-section h2{font-size:23px}.result-buttons{margin-top:18px}.preview-footer{display:grid;gap:5px;text-align:center}.more-colors,.fine-adjustments{scroll-margin-top:390px}
}
@media(max-height:580px) and (max-width:760px){.viewer-panel{position:relative;top:auto}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}