/* Shared tool interface. Functional IDs and tool-specific layouts stay intact. */
:root{color-scheme:light;--ink:#172b43;--muted:#40536b;--line:#d9e1ec;--tone:#235ac5;--tint:#eaf1ff;font-family:"Yu Gothic UI","Meiryo",system-ui,sans-serif;background:#f5f7fb;color:var(--ink)}body{background:#f5f7fb;color:var(--ink);font:16px/1.7 "Yu Gothic UI","Meiryo",system-ui,sans-serif;margin:0}body[data-tool=pdf]{--tone:#ae3245;--tint:#ffedf0}body[data-tool=cards]{--tone:#a84a18;--tint:#fff0e4}body[data-tool=qr]{--tone:#6542aa;--tint:#f1edff}body[data-tool=focus]{--tone:#166851;--tint:#e6f5ee;--green:#166851}.site-header{max-width:none;min-height:82px;margin:0;padding:18px max(24px,calc((100vw - 1120px)/2));background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:16px}.site-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:21px;font-weight:800;white-space:nowrap;color:var(--ink)}.site-brand span{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:12px;background:#165f50;color:white;font-size:24px}.back-link{font-size:14px;font-weight:700;color:var(--ink);text-underline-offset:5px}main{max-width:1168px;padding:30px 24px 45px;margin:auto}h1{font-size:clamp(28px,4vw,40px);line-height:1.4;color:var(--ink);letter-spacing:0;margin:10px 0 12px}h2{font-size:22px;color:var(--ink)}h3{color:var(--ink)}p,.lead,.hint,.muted,.note,.intro>p:last-child{color:var(--muted)}.hint,.muted,.notice{font-size:14px}.hero,.intro{padding:0;margin:0 0 25px}.hero>small,.eyebrow{color:var(--tone);font-weight:700;letter-spacing:0;font-size:14px}.panel{background:white;border:1px solid var(--line);border-radius:20px;box-shadow:0 3px 0 #dfe5ee;padding:26px}.drop{background:var(--tint);border:2px dashed var(--tone);border-radius:14px}.drop input{background:white}.row{min-width:0}.panel input,.panel select,.panel textarea{font-size:16px;color:var(--ink);border-color:#8c9bae;max-width:100%}label{color:var(--ink);font-size:15px}button,.button{font-family:inherit;font-size:15px;font-weight:700;border-radius:9px;min-height:44px}button:not(.primary){color:var(--tone);background:white;border:1px solid #aebccc}button.secondary{background:#eef2f7;color:#243e5e;border:1px solid #aebccc}button.primary,#convert,#save,#png,#download,#start,.item a.button{background:var(--tone);color:white;border:1px solid var(--tone)}button.primary:hover,#convert:hover,#save:hover,#png:hover,#download:hover,#start:hover{filter:brightness(.94)}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #175ed0;outline-offset:4px}.preview-panel{background:var(--tint)}.preview-label{font-size:15px;font-weight:700;letter-spacing:0;color:var(--ink)}#dimensions{font-size:14px;letter-spacing:0}.status,#status{font-size:15px;line-height:1.8;color:#24435d;overflow-wrap:anywhere}.status.error,#status.error{color:#a51d32}.purpose-card[aria-pressed=true]{outline-color:var(--tone)}.template-buttons button.active,.tabs button[aria-pressed=true]{background:var(--tint);color:var(--tone);border-color:var(--tone)}.info-grid article{background:transparent;box-shadow:none;border-color:var(--line)}.info-grid p{font-size:14px}.steps{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:20px 0 28px;padding:0;counter-reset:steps}.steps li{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:15px;font-weight:700;counter-increment:steps}.steps li:before{content:counter(steps);background:var(--tone);color:white;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:14px;flex-shrink:0}.save-help{padding:14px 16px;border-left:4px solid var(--tone);background:var(--tint);color:var(--ink);font-size:14px;margin-top:18px;line-height:1.8}.note{background:transparent;box-shadow:none;border-color:var(--line)}footer{max-width:1168px;margin:auto;border-top:1px solid var(--line);padding:25px 24px;font-size:14px;color:var(--muted)}footer a{color:var(--ink)}.dial{border-color:#dfece6;border-top-color:var(--tone)}.dial small{font-size:13px}#clock{font-weight:600}.sound{font-size:14px}.numbers span,#history,.muted{color:var(--muted)}.numbers span,#history{font-size:13px}.ad-zone[hidden]{display:none!important}.ad-zone{margin:56px 0 20px;padding:24px 0;border-top:1px solid var(--line);text-align:center;clear:both}.ad-zone-label{color:#40536b;font-size:13px;margin:0 0 12px}.ad-zone-content{min-height:100px;background:#f0f2f5}.ad-zone-preview .ad-zone-content{display:grid;place-items:center;min-height:120px;color:#40536b;border:1px dashed #8c9bae;font-size:14px}.ad-zone-preview strong{display:block;font-size:16px}@media(max-width:850px){.preview-panel{grid-row:auto;position:static}.workspace{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}}@media(max-width:580px){.site-header{padding:15px 18px;min-height:70px}.site-brand{font-size:17px;gap:7px}.site-brand span{width:30px;height:30px;font-size:20px}.back-link{font-size:12px}main{padding:24px 18px}.panel{padding:20px}.drop{padding:20px 12px}.steps{gap:10px}.steps li{font-size:13px}.steps li:before{width:25px;height:25px}.actions{gap:10px}.dial{max-width:100%;width:220px;height:220px}.row{gap:10px}.save-help{padding:12px}.ad-zone{margin-top:44px}.purpose-card{padding:8px}.purpose-name{font-size:13px}.site-brand{letter-spacing:-.04em}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
a.button{background:var(--tone);color:white;border:1px solid var(--tone)}.tool-label{color:var(--tone);font-weight:700;font-size:14px}.ad-zone[hidden]{display:none!important}
header.site-header .site-brand>span[aria-hidden=true]{background:#165f50;color:white;padding:0;border-radius:12px;display:grid;place-items:center;width:38px;height:38px;font-size:24px}@media(max-width:580px){header.site-header .site-brand>span[aria-hidden=true]{width:30px;height:30px;font-size:20px}}