#view-create [hidden],#creator-preview [hidden]{display:none!important}
#view-create{background:#fff!important;padding-bottom:28px!important}
#creator-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}
#creator-toolbar>div{display:flex;gap:6px}
#draft-status{font-size:11px;color:#6b8177;overflow-wrap:anywhere}
#creator-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #dce8e1;margin-bottom:24px}
#creator-steps button{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 2px;border:0;border-bottom:3px solid transparent;background:none;color:#78867f;font-size:12px;font-weight:700;min-height:52px;white-space:nowrap}
#creator-steps button span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#edf2ef;font-size:10px;flex-shrink:0}
#creator-steps button[aria-current="step"]{color:#23725c;border-bottom-color:#23725c}
#creator-steps button[aria-current="step"] span{background:#23725c;color:white}
.creator-pane>div.bg-white,.creator-pane>div.bg-blue-50,.creator-pane>div.bg-red-50{border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
.creator-pane>div.bg-blue-50{border-bottom:1px solid #dde7e1!important;padding-bottom:24px!important;margin-bottom:24px!important}
.template-tools{padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid #dde7e1}
.template-tools>label{display:block;margin-bottom:8px;font-size:12px;font-weight:bold;color:#4a685a}
.template-tools>div{display:flex;gap:8px}
.template-tools select{min-width:0;flex:1;border:1px solid #d7e3dc;background:#f6faf7;border-radius:6px;padding:11px;font-size:13px}
.template-tools button,.preview-actions>button:not(.workshop-command){display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #c6ded1;border-radius:6px;background:#fff;color:#2d6b54;padding:10px 12px;font-size:12px;font-weight:bold}
.template-tools button svg{width:15px;height:15px}
.editor-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.editor-heading h3{font-size:16px;font-weight:bold;color:#31493d}
#question-count{font-size:11px;color:#798b80}
#view-create .q-card{background:#f7faf8;border:1px solid #d8e6df;border-radius:6px;margin-bottom:16px;padding:16px}
.question-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.question-heading>strong{font-size:12px;color:#3a7058}
.question-tools{display:flex;gap:3px}
.question-tools button{display:grid;place-items:center;width:30px;height:30px;border-radius:4px;border:0;background:transparent;color:#6c8277}
.question-tools button:hover{background:#e5f0e9}
.question-tools button:disabled{opacity:.3;cursor:default}
.question-tools svg{width:15px;height:15px}
.question-choice{display:flex;align-items:center;gap:8px;margin-top:8px}
.question-choice>span{font-size:12px;font-weight:bold;width:20px;flex-shrink:0;color:#46706e}
.question-choice:last-child>span{color:#a86386}
#view-create .question-choice input{margin:0;min-width:0}
#view-create .input-box{margin-bottom:14px;min-width:0}
#view-create .q-text{margin-bottom:0;font-size:14px;font-weight:bold}
#view-create textarea{min-height:160px;resize:vertical;line-height:1.7}
.quiz-settings{display:grid;gap:12px;margin:24px 0;padding-top:20px;border-top:1px solid #dde7e1;font-size:13px;color:#465c50}
.quiz-settings label{display:flex;align-items:center;gap:8px}
.quiz-settings input{width:16px;height:16px;accent-color:#38785a}
.creator-navigation{display:flex;justify-content:space-between;gap:16px;margin-top:28px;padding-top:20px;border-top:1px solid #dde7e1}
.creator-navigation .workshop-command{width:auto;min-width:148px;margin:0}
.creator-navigation .round-tool{width:42px;height:42px;flex-shrink:0}
#creator-error{padding:12px;background:#fff0f1;border-left:3px solid #be5268;color:#9e3f53;font-size:13px;margin-bottom:18px}
#view-create [aria-invalid="true"]{border-color:#be5268!important;outline-color:#be5268}
.preview-summary{display:grid;grid-template-columns:80px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:24px}
.preview-summary img{width:80px;height:80px;object-fit:cover;border:1px solid #d9e6df;border-radius:6px}
.preview-summary h3{font-size:19px;font-weight:bold;line-height:1.5;overflow-wrap:anywhere;color:#304b3b}
.preview-summary p{font-size:12px;color:#718575;margin-top:8px}
.summary-result{padding:16px 0;border-top:1px solid #dde7e1;overflow-wrap:anywhere}
.summary-result small{font-size:11px;color:#8f6381;font-weight:bold}
.summary-result h4{font-size:16px;font-weight:bold;color:#365443;margin-top:6px}
.summary-result p{font-size:12px;color:#718575;margin-top:5px}
.preview-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}
.preview-actions .workshop-command{grid-column:1/-1;margin:0;width:100%}
#creator-preview{padding:0;border:1px solid #cadaD0;border-radius:8px;width:calc(100% - 24px);max-width:540px;max-height:88dvh;background:#fff;color:#355344;overflow:hidden}
#creator-preview::backdrop{background:rgba(25,45,35,.65)}
.preview-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #dde7e1;font-size:13px}
#preview-body{padding:24px;overflow:auto;max-height:calc(88dvh - 65px);overscroll-behavior:contain;background:#f8fbf9}
#creator-preview[data-skin="pink"] #preview-body{background:#fff1f7;color:#a8487f}
#creator-preview[data-skin="blue"] #preview-body{background:#eff9ff;color:#36668b}
#creator-preview[data-skin="retro"] #preview-body{background:#122217;color:#c2e595;font-family:monospace}
.preview-cover{display:block;width:180px;max-width:70%;aspect-ratio:1;object-fit:cover;margin:0 auto 20px;border-radius:6px}
.preview-title{font-size:23px;font-weight:bold;line-height:1.5;margin-bottom:16px;overflow-wrap:anywhere}
.preview-copy{font-size:14px;line-height:1.8;white-space:pre-line;overflow-wrap:anywhere;margin-bottom:20px}
.preview-count{font-size:11px;color:#7b8b82;margin-bottom:12px}
.preview-option,.preview-command{display:block;width:100%;padding:16px;text-align:left;border:1px solid #ceded3;border-radius:6px;background:#fff;color:#355344;font-size:14px;line-height:1.5;margin-top:12px;overflow-wrap:anywhere}
.preview-command{text-align:center;font-weight:bold;background:#35765b;color:#fff;border-color:#35765b}
.preview-back{border:0;background:transparent;color:inherit;padding:12px 0;margin-top:10px;font-size:12px}
.play-back{display:flex;justify-content:center;align-items:center;gap:6px;background:transparent;color:var(--t-primary);padding:16px;font-size:12px;margin:10px auto 0}
.play-back svg{width:14px;height:14px}
@media(max-width:360px){#creator-steps button{flex-direction:column;gap:5px;font-size:11px}.q-card{padding:12px!important}.question-tools button{width:27px;height:27px}.preview-title{font-size:21px}}
@media(prefers-reduced-motion:reduce){#view-create *,#creator-preview *{transition:none!important;animation:none!important}}

/* The editor stays neutral; the cover, preview and player share the chosen theme. */
#view-create{color:#283b3a;background:#fff!important}
.creator-masthead{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.creator-masthead>div{flex:1;min-width:0}
.creator-masthead h2{font-size:21px;font-weight:800;line-height:1.5;margin:2px 0 0}
.creator-kicker{font:700 9px/1.6 monospace;color:#b94b66}
.creator-masthead img{width:56px;height:56px;object-fit:contain;border-radius:6px}
#creator-toolbar{margin-bottom:14px}
#creator-steps{margin-bottom:24px;background:#f6f7f9;border:1px solid #e2e6eb;border-radius:6px;overflow:hidden}
#creator-steps button{color:#728081;min-height:56px;border-bottom-width:3px}
#creator-steps button[aria-current="step"]{background:#fff;color:#236f64;border-bottom-color:#236f64}
#creator-steps button[aria-current="step"] span{background:#236f64}
.template-tools{padding-bottom:20px;margin-bottom:20px}
.template-tools>div{align-items:stretch}
.template-tools select{background:#fff;border-color:#ccd8d5;font-weight:700;font-size:13px;min-height:44px}
.template-tools button{width:44px;min-width:44px;padding:0;background:#f3f6f8}
.scoring-rule{padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid #dde7e1}
.scoring-rule .editor-heading{margin-bottom:12px}
.scoring-rule h3{font-size:14px;font-weight:800}
.scoring-rule .editor-heading>span{font-size:10px;color:#8b657b}
.scoring-path{display:grid;grid-template-columns:minmax(0,1fr) 16px 62px;align-items:center;gap:10px;min-height:40px;font-size:12px}
.scoring-path span{border-left:3px solid #287a65;padding-left:10px;line-height:1.6}
.scoring-path strong{color:#287a65;font-size:12px}
.scoring-path:nth-of-type(3) span{border-color:#b63e68}
.scoring-path:nth-of-type(3) strong{color:#b63e68}
.scoring-path svg{width:15px;height:15px;color:#83938e}
.scoring-rule>p{margin-top:12px;font-size:11px;line-height:1.6;color:#738580}
#view-create .skin-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:20px}
#view-create .skin-choice{position:relative;scroll-margin-block:100px}
#view-create .skin-choice input{inset:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}
#main-scroll-container:has(#view-create.active){scroll-padding-block:24px 100px}
#view-create :is(input,textarea,select){scroll-margin-block:90px}
#view-create .skin-choice>span{gap:8px;padding:8px 7px 10px;color:#576c66;font-size:10px;border-radius:6px}
#view-create .skin-choice input:checked+span{background:#f5fafa;border-color:#236f64;box-shadow:inset 0 0 0 1px #236f64;color:#236f64}
.skin-sample{display:flex;flex-direction:column;justify-content:center;align-items:stretch;width:100%;height:69px;padding:9px 12px;border-radius:3px;border:1px solid #c7ded4;background:#eaf6ee;font-style:normal;gap:5px}
.skin-sample b{font-size:15px;line-height:1.2;text-align:left;color:#287a65}
.skin-sample em{display:block;height:7px;border:1px solid #a7c9b9;border-radius:2px;background:#fff}
.sample-pink{background:#ffeaf1;border-color:#e8bdcc}
.sample-pink b{font-family:Georgia,serif;color:#ad4e73}
.sample-pink em{border-color:#dfb3c3;background:#fff9fc}
.sample-blue{background:#def4ff;border-color:#a7d8ec;box-shadow:inset 0 6px #f7fcff}
.sample-blue b{color:#226d95}
.sample-blue em{border-color:#7ab1d0;box-shadow:2px 2px #b7def4}
.sample-retro{background:#14291f;border-color:#314d3c;border-radius:0}
.sample-retro b{font:700 12px/1.4 monospace;color:#c9e77c}
.sample-retro em{background:#263c2e;border-color:#85a85b;border-radius:0}
.sample-comic{background:#fff1a9;border:2px solid #283b3a;box-shadow:2px 2px #283b3a}
.sample-comic b{font-size:15px;color:#b84732}
.sample-comic em{background:#fff;border-color:#283b3a;border-radius:0}
.sample-notebook{background:repeating-linear-gradient(#fff 0 15px,#dce7f2 15px 16px);border-color:#c7d5e4;border-left:3px solid #d88c9c}
.sample-notebook b{font:italic 15px/1.2 Georgia,serif;color:#596c90}
.sample-notebook em{background:#ffffffa6;border-color:#bdccdc}
.design-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:24px}
.design-options .input-box{height:40px;padding:8px;font-size:11px;margin:0;background:#fff}
#accent-picker{display:flex;align-items:center;gap:5px;height:40px}
.accent-choice{position:relative;cursor:pointer}
.accent-choice input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}
.accent-choice span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--swatch,#fff);border:3px solid #fff;outline:1px solid #e0e5e6}
.accent-choice svg{width:16px;height:16px;color:#546765}
.accent-choice input:checked+span{outline:2px solid #253b3b}
.accent-choice:has(input:focus-visible)>span{outline:3px solid #dfad3d}
.cover-preview{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:18px;padding:22px 18px;margin-bottom:26px;border:1px solid var(--t-border);background:var(--t-bg);color:var(--t-text);min-height:170px}
.cover-preview>img{width:88px;height:88px;object-fit:contain;border-radius:5px}
.cover-preview .theme-tag{display:inline-block;font-size:9px;padding:3px 6px;margin-bottom:7px}
.cover-preview h3{font-size:17px;font-weight:800;line-height:1.45;margin:0 0 5px;overflow-wrap:anywhere}
#cover-preview-author{display:block;font-size:10px;opacity:.65;overflow-wrap:anywhere}
.cover-preview-start{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:7px 14px;margin-top:12px;background:var(--t-primary);color:#fff;font-size:10px;font-weight:700;border-radius:4px}
.cover-preview-start svg{width:12px;height:12px}
#view-create .input-box{background:#fff;border-color:#ccd9d4;border-radius:5px}
#view-create .q-card{border:1px solid #d3dfdc;border-left:3px solid #6da797;background:#fff;padding:18px;margin-bottom:22px}
.question-heading{margin-bottom:14px}
.question-scoring-note{padding:0 0 16px;margin:0 0 20px;border-bottom:1px solid #dce7e1;font-size:12px;line-height:1.9;color:#526e63}
.question-scoring-note p{margin:0}
.question-scoring-note strong{color:#287a65;font-weight:700}
.question-scoring-note p:last-child strong{color:#b63e68}
.question-heading>strong{font-size:12px;font-weight:800;color:#2d6d5f}
.question-tools button{background:#f7f9f8}
#view-create .q-text{padding:13px 11px;background:#f4f8f6;font-size:14px;border-color:#e4ece7}
.question-choice{display:block;margin-top:15px}
#view-create .question-choice>.choice-mapping{display:flex;align-items:baseline;gap:8px;width:auto;color:#287a65;margin-bottom:6px}
.choice-mapping b{font-size:11px;flex-shrink:0}
.choice-mapping small{font-size:10px;font-weight:400;line-height:1.5;overflow-wrap:anywhere;min-width:0}
#view-create .question-choice:last-child>.choice-mapping{color:#b63e68}
#view-create .question-choice input{display:block;width:100%;font-size:12px;background:#fff}
.quiz-settings{grid-template-columns:1fr 1fr;gap:10px;font-size:11px;padding-top:18px}
.quiz-settings input{flex-shrink:0}
.setting-with-help{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0}
.setting-with-help>label{flex:1;min-width:0}
.creator-help-trigger{display:inline-flex;align-items:center;justify-content:center;width:40px;min-width:40px;height:40px;border:0;background:transparent;color:#678c80;cursor:pointer;border-radius:4px;flex-shrink:0}
.creator-help-trigger:hover{color:#236f64;background:#edf6f1}
.creator-help-trigger svg{width:17px;height:17px;pointer-events:none}
#view-create .choice-mapping{min-height:40px;margin-top:-8px;margin-bottom:0}
.choice-mapping .mapping-help{margin-left:auto}
#creator-help{width:calc(100% - 32px);max-width:440px;padding:0;border:1px solid #cfddd7;border-radius:8px;background:#fff;color:#2d4c40;max-height:85dvh;overflow:auto}
#creator-help::backdrop{background:rgba(25,45,35,.58)}
#creator-help .preview-head{background:#f5faf7;color:#2d4c40;border-color:#dce7e1;gap:12px}
#creator-help-title{font-size:14px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
#creator-help-copy{padding:20px;margin:0;font-size:14px;line-height:1.9;overflow-wrap:anywhere;white-space:pre-line}
#creator-help-close{width:40px;height:40px}
.result-editor-heading{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;font-weight:800;margin:0 0 18px}
.result-editor-heading>span{font:700 14px/1 monospace;color:#287a65;border-bottom:2px solid #287a65;padding-bottom:4px}
.result-editor-heading small{font-size:10px;font-weight:400;color:#76867d}
.creator-pane .bg-red-50 .result-editor-heading>span{color:#b63e68;border-color:#b63e68}
.creator-navigation{position:sticky;bottom:-28px;background:#fffffff5;backdrop-filter:blur(8px);padding:14px 0;margin-top:22px;z-index:2}
#view-create .workshop-command{background:#236f64;border-color:#236f64;box-shadow:none;min-height:44px;font-size:12px}
#view-create .creator-navigation .workshop-command{min-width:156px}
#preview-body{background:var(--t-bg);color:var(--t-text);font-family:var(--t-font,inherit)}
#creator-preview[data-skin] #preview-body{background-color:var(--t-bg);color:var(--t-text);font-family:var(--t-font,inherit)}
.preview-option{background:var(--t-btn-bg);color:var(--t-text);border-color:var(--t-border);font-family:inherit}
.preview-command{background:var(--t-primary);color:#fff;border-color:var(--t-primary);font-family:inherit}
.preview-count{color:var(--t-primary);opacity:.8}
.preview-head{color:var(--t-text);background:var(--t-bg);border-color:var(--t-border)}
#creator-preview{border-color:var(--t-border)}
:is(#view-play,#creator-preview,#creator-cover-preview)[data-theme]{font-family:var(--t-font,Arial,sans-serif)}
:is(#view-play,#creator-preview,#creator-cover-preview)[data-theme="default"]{--t-bg:#f1faf5;--t-text:#294c40;--t-primary:#287a65;--t-primary-light:#deeee4;--t-border:#c5dfd0;--t-card-bg:#fff;--t-btn-bg:#fff;--t-radius:6px}
:is(#view-play,#creator-preview,#creator-cover-preview)[data-theme="pink"]{--t-bg:#fff3f7;--t-text:#624255;--t-primary:#b63e68;--t-primary-light:#f9dce6;--t-border:#e4bdce;--t-card-bg:#fffafb;--t-btn-bg:#fff;--t-radius:6px}
:is(#view-play,#creator-preview,#creator-cover-preview)[data-theme="blue"]{--t-bg:#edf8ff;--t-text:#285371;--t-primary:#256d9c;--t-primary-light:#d8effc;--t-border:#9ec7df;--t-card-bg:#fff;--t-btn-bg:#fff;--t-radius:5px}
:is(#view-play,#creator-preview,#creator-cover-preview)[data-theme="retro"]{--t-bg:#16271e;--t-text:#e7ecd6;--t-primary:#576d26;--t-primary-light:#34482d;--t-border:#79965a;--t-card-bg:#213728;--t-btn-bg:#24392c;--t-radius:0px;--t-font:'Courier New',monospace}
:is(#view-play,#creator-preview,#creator-cover-preview)[data-theme="comic"]{--t-bg:#fff6c9;--t-text:#283b3a;--t-primary:#b84732;--t-primary-light:#ffdfc6;--t-border:#283b3a;--t-card-bg:#fff;--t-btn-bg:#fff;--t-radius:0px}
:is(#view-play,#creator-preview,#creator-cover-preview)[data-theme="notebook"]{--t-bg:#fff;--t-text:#354b60;--t-primary:#526d9a;--t-primary-light:#e9effa;--t-border:#b9cbdd;--t-card-bg:#ffffffd9;--t-btn-bg:#fff;--t-radius:3px;--t-font:Georgia,'Batang',serif}
#view-play[data-theme="blue"] .theme-btn,#creator-preview[data-theme="blue"] .preview-option{box-shadow:3px 3px #b6d9ee;border-radius:5px}
#view-play[data-theme="retro"] .theme-btn,#creator-preview[data-theme="retro"] .preview-option{border-radius:0;border-width:2px;border-style:dashed}
#view-play[data-theme="comic"] .theme-card,#view-play[data-theme="comic"] .theme-btn,#creator-preview[data-theme="comic"] .preview-option{border-width:2px;border-radius:0;box-shadow:4px 4px #283b3a}
#view-play[data-theme="comic"] .theme-primary-btn,#creator-preview[data-theme="comic"] .preview-command,.cover-preview[data-theme="comic"] .cover-preview-start{border:2px solid #283b3a;box-shadow:3px 3px #283b3a;border-radius:0}
#view-play[data-theme="notebook"],#creator-preview[data-theme="notebook"] #preview-body,.cover-preview[data-theme="notebook"]{background-image:repeating-linear-gradient(transparent 0 31px,#dce8f3 31px 32px);border-left:3px solid #e2a6b1}
#view-play[data-theme="pink"] .theme-card,#creator-preview[data-theme="pink"] .preview-option{border-top:3px double var(--t-border);border-bottom:3px double var(--t-border)}
#creator-preview[data-theme="retro"] .preview-count{color:#c8dc87}
#view-play[data-theme="retro"] .theme-tag,#view-play[data-theme="retro"] .result-icon,.cover-preview[data-theme="retro"] .theme-tag{color:#d9eca4}
#view-play[data-theme="retro"] .theme-btn:hover{color:#d9eca4;background:#34482d}
@media(max-width:360px){.creator-masthead{gap:9px}.creator-masthead h2{font-size:18px}.creator-masthead img{width:44px;height:44px}.creator-kicker{font-size:8px}.skin-sample{padding:8px;height:62px}.design-options{gap:8px}.accent-choice span{width:24px;height:24px}.cover-preview{grid-template-columns:68px minmax(0,1fr);gap:12px;padding:17px 12px}.cover-preview>img{width:68px;height:68px}.cover-preview h3{font-size:15px}.quiz-settings{grid-template-columns:1fr}.creator-navigation{bottom:-22px}}