.creator-theme { --studio-accent:#dfbf77; background:#101318; color:#ecedf0; font-family:Arial,"Yu Gothic",Meiryo,sans-serif; }
.creator-theme * { box-sizing:border-box; }
.creator-theme [hidden] { display:none!important; }
.studio { max-width:1380px; margin:auto; padding:130px 28px 40px; }
.studio-intro { padding:50px 0 70px; max-width:900px; }
.studio h1 { font-family:"Noto Serif JP",serif; font-size:clamp(30px,4vw,52px); letter-spacing:.04em; margin:20px 0; }
.studio h2 { font-size:clamp(24px,3vw,32px); margin:12px 0 20px; }
.studio h3 { line-height:1.7; }
.studio p { line-height:1.9; margin:12px 0; }
.eyebrow { color:var(--studio-accent); font-size:12px; letter-spacing:.18em; }
.panel { scroll-margin-top:100px; padding:32px; margin-bottom:32px; border:1px solid #42464f; border-radius:12px; background:#181c23; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:24px 0 12px; }
.studio button,.studio .primary,.studio .secondary { font:inherit; cursor:pointer; border-radius:6px; padding:12px 18px; line-height:1.5; text-decoration:none; display:inline-block; white-space:normal; }
.studio .primary { background:#dfbf77; color:#151719; border:1px solid #dfbf77; font-weight:bold; }
.studio .secondary { background:#242a35; color:#f1f3f7; border:1px solid #737b88; }
.studio a:not(.primary):not(.secondary) { color:#ebd49d; text-decoration:underline; text-underline-offset:4px; }
.studio button:hover { filter:brightness(1.13); }
.studio button:disabled { opacity:.5; cursor:not-allowed; }
.studio :focus-visible { outline:3px solid #ffdb78; outline-offset:4px; }
.studio .hint { font-size:13px; color:#bdc4d0; line-height:1.9; }
.quiz-meta { display:flex; gap:16px; justify-content:space-between; margin-top:24px; color:#dfbf77; }
#quiz-progress { width:100%; height:8px; accent-color:#dfbf77; margin:16px 0; }
#quiz-question { font-size:23px; }
.quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.quiz-options button { text-align:left; border:1px solid #626b7a; background:#222a36; color:#fff; min-height:86px; padding:18px; }
.result-title { font-size:23px; color:#ebd49d; }
.result-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.faction-card { background:#222731; border:1px solid #535b68; border-top:6px solid var(--faction-color); padding:20px; border-radius:7px; }
.faction-card h4 { font-size:18px; margin:0 0 10px; }
.faction-card .score { font-size:28px; font-weight:bold; }
.faction-card .meter { height:6px; background:#5e6571; margin:12px 0; }
.faction-card .meter span { height:100%; background:var(--faction-color); display:block; }
.editor-grid { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr); gap:30px; margin-top:24px; align-items:start; }
#sheet-form label { display:block; font-size:14px; font-weight:bold; margin:16px 0; }
#sheet-form input:not([type=range]),#sheet-form select,#sheet-form textarea { display:block; width:100%; margin-top:8px; padding:11px; background:#0d121a; color:#fff; border:1px solid #717987; border-radius:5px; font:inherit; min-width:0; }
#sheet-form textarea { resize:vertical; line-height:1.7; }
#sheet-form input[type=range] { display:block; width:100%; margin-top:12px; accent-color:#dfbf77; }
.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.preview-sticky { position:sticky; top:100px; }
.preview-column { align-self:stretch; min-width:0; }
#sheet-canvas { width:100%; height:auto; display:block; border:1px solid #747b87; background:#fff; touch-action:pan-y; }
#sheet-status { font-size:14px; color:#e5d3a3; min-height:28px; }
#sheet-status.error { color:#ffb5b5; }
.file-button { position:relative; overflow:hidden; }
.file-button input { display:block; max-width:220px; margin-top:7px; font-size:12px; }
.studio-footer { padding:30px 0; color:#aeb7c4; }
.creator-theme .mobile-nav { height:100dvh; overflow:auto; padding:90px 20px 35px; align-items:safe center; }
@media(max-width:800px) { .editor-grid { grid-template-columns:1fr; } .preview-sticky { position:static; } .studio { padding:100px 16px 24px; } .panel { padding:20px; } .studio-intro { padding:26px 0 40px; } }
@media(max-width:520px) { .quiz-options,.result-cards { grid-template-columns:1fr; } .panel { padding:16px; } #quiz-question { font-size:19px; } .studio button { max-width:100%; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.creator-theme .header { background:rgba(16,19,24,.97); }