.page-heading{margin-bottom:20px}
.page-heading h1{font-size:clamp(1.8rem,3vw,2.5rem);margin:0 0 8px;word-break:keep-all;text-wrap:balance}
.page-heading>p{font-size:.9rem}
.tool-panel{margin-bottom:20px;padding:20px}
.tool-panel>h2{font-size:1.1rem;margin:0 0 14px}
.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.controls,.output-column{min-width:0;display:flex;flex-direction:column;gap:14px}
.output-column h3{margin:0;font-size:.95rem}
.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:14px;align-items:start}
.row-set{border:1px solid var(--border);border-radius:10px;padding:12px 14px 14px;margin:0;min-width:0}
.row-set legend{padding:0 6px;font-size:.88rem;font-weight:700}
.row-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:12px;align-items:end}
.field select,.field input[type=number],.field input[type=text]{min-height:44px}
input[type=color]{width:100%;min-height:44px;height:44px;padding:4px;border:1px solid #bac8db;border-radius:8px;background:#fff;cursor:pointer}
input[type=range]{min-height:44px}
input[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.check{display:flex;gap:10px;align-items:center;border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--bg);cursor:pointer;min-height:44px;min-width:0}
.check:has(input:checked){border-color:#a2b9ed;background:#f0f5ff}
.check input{margin:0;flex-shrink:0}
.check strong{font-size:.85rem;overflow-wrap:anywhere}
.small-note{font-size:.8rem;margin:0;overflow-wrap:anywhere}
.preview-box{height:200px;border-radius:12px;border:1px solid var(--border);background:#fff}
.shadow-stage{display:flex;justify-content:center;align-items:center;min-height:240px;padding:32px;border-radius:12px;border:1px solid var(--border);background:#f3f5f9;overflow:hidden}
.shadow-box{width:min(100%,160px);height:120px;border-radius:12px;background:#fff}
.code-block{margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:#f9fbff;font:.86rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;direction:ltr;text-align:left;unicode-bidi:isolate;min-height:3.2em}
.code-block code{font-size:inherit}
.action-row{display:flex;gap:10px;flex-wrap:wrap}
.action-row .button{font-size:.85rem;min-height:44px}
.status{margin:0;min-height:1.5em;overflow-wrap:anywhere}
.status.error{color:var(--danger)}
.guide{margin:32px 0 40px;padding-top:22px;border-top:1px solid var(--border);color:var(--muted);font-size:.86rem;line-height:1.8}
.guide h2{color:var(--text);font-size:1.1rem}
.guide h3{color:var(--text);margin:20px 0 6px}
.guide summary{cursor:pointer;color:var(--text);font-weight:650;padding:10px 0;min-height:44px}
.guide summary:focus-visible,.code-block:focus-visible,.check:has(input:focus-visible){outline:3px solid #e9aa23;outline-offset:2px}
button,input,select,summary,a{touch-action:manipulation}
@media(max-width:760px){
  .tool-layout{grid-template-columns:1fr;gap:18px}
  .tool-panel{padding:16px}
}
@media(max-width:480px){
  .action-row .button{flex:1 1 100%;width:100%;text-align:center}
  .row-grid{grid-template-columns:1fr 1fr}
}