:root{color-scheme:dark;--bg:#1c1d1f;--surface:#252629;--line:#44464b;--text:#eceef1;--muted:#b5b9c1}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.65 "Yu Gothic UI",Meiryo,system-ui,sans-serif}button,a,input{font:inherit}button{cursor:pointer;color:inherit;background:#303135;border:1px solid #7e8189;border-radius:8px;min-height:36px;padding:6px 12px}button:hover{background:#3d4148}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #bcc5d3;outline-offset:3px}[hidden]{display:none!important}header,main,footer{max-width:1180px;margin:auto;padding:24px}header{display:flex;gap:16px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}a{color:var(--text)}.brand{text-decoration:none;font-size:23px;font-weight:700}.brand span{display:block;font-size:12px;font-weight:400;color:var(--muted)}.badge{font-size:12px;color:var(--muted)}.intro{margin:4px 0 24px}h1{font-size:28px;letter-spacing:.02em;margin:0 0 8px}h2{font-size:14px;margin:0 0 12px}p{margin:0 0 12px}.intro p,.hint{color:var(--muted)}.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:24px;padding-bottom:12px}.tabs button{min-width:140px;text-align:left;font-size:18px;background:transparent;border-color:transparent}.tabs span{display:block;font-size:12px;color:var(--muted)}.tabs button[aria-selected=true]{background:#3d4148;border-color:#bcc5d3}.layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr);gap:28px;align-items:start}.preview-column{position:sticky;top:16px}.preview-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.preview-tools h2{margin:0}.backgrounds{display:flex;gap:8px;flex-wrap:wrap}.backgrounds button{width:24px;min-height:24px;padding:0;background:var(--swatch);border-radius:6px}.backgrounds .pattern{background:linear-gradient(135deg,#69807c,#c3a2aa)}[aria-pressed=true]{outline:2px solid #bcc5d3;outline-offset:2px}#stage{position:relative;width:100%;aspect-ratio:16/9;background:#111;border:1px solid var(--line);border-radius:10px;overflow:hidden}#preview{color-scheme:normal;position:absolute;inset:0;width:100%;height:100%;border:0;max-width:none;pointer-events:none}.position{display:flex;justify-content:space-between;align-items:center;margin:14px 0;gap:8px}.position>div{display:flex;gap:6px}.position button{padding:4px 10px}.hint{font-size:12px}.export-card,.help,.paid{padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-top:20px}.export-card strong{white-space:nowrap}.primary{display:block;width:100%;background:#eceef1;color:#1c1d1f;font-weight:600;margin:12px 0}.primary:hover{background:#cdd2db}.help summary{cursor:pointer;font-weight:600}.help p{font-size:12px;color:var(--muted)}.help ol{padding-left:20px}.paid p{font-size:12px;color:var(--muted)}.paid a{display:inline-block;margin:0 18px 0 0}#status{font-size:12px;margin:0}.editor-column iframe{display:block;width:100%;border:0;height:1700px}footer{font-size:12px;color:var(--muted);border-top:1px solid var(--line)}@media(max-width:760px){header,main,footer{padding:16px}.layout{grid-template-columns:minmax(0,1fr);gap:20px}.preview-column{position:static}h1{font-size:24px}.tabs button{min-width:0;flex:1}.badge{max-width:70px}.brand{font-size:21px}.position{flex-wrap:wrap}}

.comparison{margin:16px 0}.comparison>div{padding:12px 0;border-top:1px solid var(--fw-line,#44464b)}.comparison dt{font-weight:600;margin-bottom:6px}.comparison dd{margin:4px 0;line-height:1.6}.comparison dd span{display:inline-block;min-width:100px;color:#b5b9c1}.paid p+p{margin-top:12px}