*{box-sizing:border-box} :root{font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:#263a40;background:#eeede7;font-synthesis:none} body{margin:0} button,select,input,textarea{font:inherit} button{cursor:pointer;border:1px solid #c7ccc7;background:#f8f8f3;color:#263a40;padding:9px 14px;border-radius:6px;font-size:13px} button:hover{background:#e2e8de} button:disabled{cursor:default;opacity:.4} button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #d9773d;outline-offset:3px} .masthead{min-height:94px;padding:22px 4.5%;border-bottom:1px solid #d4d6cc;display:flex;align-items:center;gap:28px} .brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;font-size:19px;font-weight:800;letter-spacing:-.5px}.brand-mark{display:grid;place-items:center;border:1px solid #36574d;background:#36574d;color:#fcf7e9;width:47px;height:47px;border-radius:50%;font-size:32px;font-weight:400}.brand small{display:block;font-size:10px;font-weight:400;letter-spacing:1.4px;margin-top:4px}.edition{margin-left:auto;color:#737b70;font-size:12px}.quiet{background:transparent}.guide{padding:24px 4.5%;background:#e4e7de;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;font-size:13px;line-height:1.8}.guide[hidden]{display:none}.guide p{margin:6px 0 0;color:#546058}code{background:#f6f6f0;padding:2px 4px;border-radius:3px}main{padding:30px 4.5% 20px;max-width:1900px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:end;margin:5px 0 30px}.eyebrow{font-size:10px;letter-spacing:2px;color:#8a6549;margin:0 0 12px}h1{font-size:clamp(22px,2.5vw,33px);font-weight:600;letter-spacing:-1.8px;margin:0}.intro>p{font-size:12px;line-height:1.8;color:#777e71;margin:0}.toolbar{display:flex;align-items:center;gap:18px;padding:14px 0}.example-control{font-size:12px;color:#647265;display:flex;align-items:center;gap:9px}select{border:1px solid #c7ccc7;border-radius:5px;background:#f8f8f3;padding:9px;max-width:180px;font-size:13px}.toolbar-files{display:flex;gap:6px}.run-controls{display:flex;gap:8px;align-items:center;margin-left:auto}#status{font-size:11px;margin-right:8px;color:#677867}.primary{background:#36574d;color:#fff;border-color:#36574d}.primary:hover{background:#244337}kbd{font:10px inherit;opacity:.6;margin-left:13px}.workspace{display:grid;grid-template-columns:165px minmax(250px,1.35fr) minmax(260px,.85fr);border:1px solid #c7ccc7;border-radius:8px;overflow:hidden;min-height:480px;box-shadow:0 7px 25px #263a4008}.panel-label{height:44px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dee0d8;font-size:11px;color:#617065;gap:10px}.panel-label>span+span{font-size:10px;color:#91988c}.files-panel{background:#e8eae2;border-right:1px solid #d3d7cc;display:flex;flex-direction:column}.files-panel nav{padding:10px 8px;flex:1}.file{display:block;border:0;background:transparent;width:100%;padding:10px 8px;border-radius:4px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;margin-bottom:3px}.file.active{background:#d8dfd1;color:#264f3e;font-weight:bold}.storage-note{padding:12px;font-size:10px;line-height:1.9;color:#7b8577}.editor-panel{background:#fafbf6;min-width:0;display:flex;flex-direction:column}.editor-wrap{display:flex;flex:1;min-height:430px;overflow:hidden}#line-numbers{background:#f6f7f1;color:#acb3a4;padding:18px 10px 18px 13px;min-width:44px;text-align:right;font:13px/1.9 Consolas,monospace;margin:0;overflow:hidden;user-select:none}#editor{resize:vertical;border:0;outline:0;background:transparent;color:#27493c;padding:18px 16px;width:100%;min-height:430px;font:13px/1.9 Consolas,"Malgun Gothic",monospace;tab-size:4;white-space:pre;overflow:auto}#editor:focus{box-shadow:inset 0 0 0 2px #7b988830}.editor-footer{border-top:1px solid #e4e7dc;padding:8px 14px;display:flex;justify-content:space-between;font-size:10px;color:#8b9586}.output-panel{background:#273d38;color:#e2e9dd;border-left:1px solid #ccd2c6;display:flex;flex-direction:column;min-width:0}.output-panel .panel-label{color:#b0c3b2;border-color:#3c5147}.text-button{border:0;background:transparent;padding:0;font-size:11px;color:inherit}.text-button:hover{background:transparent;text-decoration:underline}#output{padding:20px;flex:1;max-height:480px;overflow:auto;font:13px/1.9 Consolas,"Malgun Gothic",monospace;white-space:pre-wrap;overflow-wrap:anywhere}.output-placeholder{color:#8fa58f;font-size:16px;line-height:1.9;margin:75px 0;text-align:center}.output-line{margin:0}.output-error{color:#ffbb94}.output-note{font-size:11px;color:#9eb39e;margin-top:16px}#input-form,#debug-panel{margin:0 15px 15px;padding:14px;border:1px solid #5f7868;border-radius:5px;background:#334c41}#input-form label{display:block;font-size:12px;margin-bottom:10px}#input-form>div{display:flex;gap:7px}#program-input{min-width:0;width:100%;padding:8px;background:#f8faf3;border:0;border-radius:3px;color:#223c2f}#input-eof{margin-top:10px;color:#c8d7c4}#debug-panel strong{font-size:12px}#debug-values{font:12px/1.8 Consolas,"Malgun Gothic",monospace;white-space:pre-wrap;max-height:160px;overflow:auto}.palette{margin-top:18px;border-bottom:1px solid #d0d4c8;padding-bottom:17px}.palette summary{font-size:12px;cursor:pointer;color:#536a57}.palette summary span{margin-left:13px;font-size:10px;color:#8e9787}#jamo-keys{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:15px}#jamo-keys button{display:flex;justify-content:center;gap:10px;align-items:center;min-height:42px;font-size:19px}#jamo-keys small{font-size:10px;color:#70806c}footer{display:flex;justify-content:space-between;font-size:10px;color:#919888;margin-top:18px}dialog{border:1px solid #a9b6a6;border-radius:10px;background:#f6f7f0;color:#263a40;width:360px;padding:24px}dialog::backdrop{background:#16372966}dialog h2{margin-top:0;font-size:19px}dialog label{font-size:12px;display:block}dialog input{display:block;margin-top:10px;padding:10px;width:100%;border:1px solid #bbc6b4}dialog form>div{display:flex;justify-content:end;gap:8px}#new-file-error{color:#a13d20;font-size:12px}
@media(max-width:1050px){.workspace{grid-template-columns:130px minmax(200px,1.2fr) minmax(210px,.8fr)}.toolbar{flex-wrap:wrap;gap:10px}.edition{display:none}.quiet{margin-left:auto}.toolbar-files button{font-size:11px;padding:8px}#jamo-keys{grid-template-columns:repeat(8,1fr)}#jamo-keys button{gap:5px}.intro>p{display:none}}
@media(max-width:740px){.masthead{padding:16px 5%;min-height:78px}.brand{font-size:17px}.brand-mark{width:38px;height:38px;font-size:27px}main{padding:25px 4%}.intro{margin-bottom:18px}.workspace{display:flex;flex-direction:column}.files-panel{border-right:0}.files-panel .panel-label,.storage-note{display:none}.files-panel nav{display:flex;overflow:auto;padding:7px}.file{width:auto;flex-shrink:0;margin:0 4px 0 0}.editor-wrap,#editor{min-height:330px;max-height:500px}.output-panel{min-height:240px;border-left:0;border-top:1px solid #d2d7c9}#output{min-height:150px;max-height:340px}.output-placeholder{margin:25px 0}.run-controls{margin-left:0;width:100%;justify-content:flex-end}#status{margin-right:auto}.toolbar-files{margin-left:auto}.toolbar-files button{padding:8px}.example-control{font-size:0;gap:0}select{max-width:155px;font-size:12px}.editor-footer>span+span{display:none}.guide{grid-template-columns:1fr;padding:22px 5%;gap:18px}#jamo-keys{grid-template-columns:repeat(5,1fr)}#jamo-keys button{flex-direction:column;gap:2px;padding:6px}footer{line-height:1.8;gap:20px}kbd{display:none}}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.header-actions .quiet{margin:0;white-space:nowrap}.settings-button{display:grid;place-items:center;width:44px;height:44px;padding:0;background:transparent}.settings-button:disabled{opacity:.65}.settings-button:disabled:hover{background:transparent}.settings-button svg{display:block}
@media(max-width:1050px){.header-actions{margin-left:auto}}
@media(max-width:740px){.masthead{gap:12px;flex-wrap:wrap}.header-actions{gap:6px}}

/* The paper theme inherits the original palette; other skins replace its colors. */
:root{--accent:#36574d;accent-color:var(--accent)}
:root[data-theme="night"]{color-scheme:dark;--page:#131d24;--text:#e5edf2;--surface:#1d2a33;--surface-hover:#2e414c;--border:#536770;--muted:#b0c0c8;--soft:#a2b4bc;--quiet:#94a9b3;--guide:#1b3038;--code:#2c424b;--sidebar:#19262e;--selected:#314b55;--selected-text:#edf9f6;--editor:#17242c;--editor-text:#dcf0e8;--gutter:#1b2c35;--gutter-text:#8ba2ad;--output:#0d1b22;--output-text:#edf5eb;--output-muted:#b5cbbb;--output-border:#51685e;--output-inset:#1e352f;--input:#edf4ed;--input-text:#223c2f;--error:#ffbea3;--dialog:#1b2a33;--focus:#f3af79;--eyebrow:#ecc19e}
:root[data-theme="contrast"]{color-scheme:dark;--page:#000;--text:#fff;--surface:#111;--surface-hover:#303030;--border:#e6e6e6;--muted:#fff;--soft:#eee;--quiet:#e6e6e6;--guide:#151515;--code:#262626;--sidebar:#101010;--selected:#fff;--selected-text:#000;--editor:#000;--editor-text:#fff;--gutter:#161616;--gutter-text:#eee;--output:#000;--output-text:#fff;--output-muted:#f3f3f3;--output-border:#eee;--output-inset:#161616;--input:#fff;--input-text:#000;--error:#ffbcb4;--dialog:#080808;--focus:#ffdd57;--eyebrow:#fff}
:root{color:var(--text,#263a40);background:var(--page,#eeede7)}
button{border-color:var(--border,#c7ccc7);background:var(--surface,#f8f8f3);color:var(--text,#263a40)}
button:hover{background:var(--surface-hover,#e2e8de)}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible,textarea:focus-visible{outline-color:var(--focus,#d9773d)}
.masthead{border-color:var(--border,#d4d6cc)}
.brand-mark{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fcf7e9)}
.edition{color:var(--muted,#737b70)}
.quiet,.settings-button,.text-button,.file{background:transparent}
.guide{background:var(--guide,#e4e7de)}
.guide p{color:var(--muted,#546058)}
code{background:var(--code,#f6f6f0)}
.eyebrow{color:var(--eyebrow,#8a6549)}
.intro>p{color:var(--muted,#777e71)}
.example-control{color:var(--muted,#647265)}
select{border-color:var(--border,#c7ccc7);background:var(--surface,#f8f8f3);color:var(--text,#263a40)}
#status{color:var(--muted,#677867)}
.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
.primary:hover{background:var(--accent-hover,#244337)}
.workspace{border-color:var(--border,#c7ccc7)}
.panel-label{border-color:var(--border,#dee0d8);color:var(--muted,#617065)}
.panel-label>span+span{color:var(--quiet,#91988c)}
.files-panel{background:var(--sidebar,#e8eae2);border-color:var(--border,#d3d7cc)}
.file.active{background:var(--selected,#d8dfd1);color:var(--selected-text,#264f3e)}
.storage-note{color:var(--soft,#7b8577)}
.editor-panel{background:var(--editor,#fafbf6)}
#line-numbers{background:var(--gutter,#f6f7f1);color:var(--gutter-text,#acb3a4)}
#editor{color:var(--editor-text,#27493c)}
.editor-footer{border-color:var(--border,#e4e7dc);color:var(--soft,#8b9586)}
.output-panel{background:var(--output,#273d38);color:var(--output-text,#e2e9dd);border-color:var(--border,#ccd2c6)}
.output-panel .panel-label{color:var(--output-muted,#b0c3b2);border-color:var(--output-border,#3c5147)}
.output-panel .text-button{color:inherit}
.output-placeholder{color:var(--output-muted,#8fa58f)}
.output-error{color:var(--error,#ffbb94)}
.output-note{color:var(--output-muted,#9eb39e)}
#input-form,#debug-panel{border-color:var(--output-border,#5f7868);background:var(--output-inset,#334c41)}
#program-input{background:var(--input,#f8faf3);color:var(--input-text,#223c2f)}
#input-eof{color:var(--output-muted,#c8d7c4)}
.palette{border-color:var(--border,#d0d4c8)}
.palette summary{color:var(--muted,#536a57)}
.palette summary span{color:var(--soft,#8e9787)}
#jamo-keys small{color:var(--soft,#70806c)}
footer{color:var(--soft,#919888)}
dialog{border-color:var(--border,#a9b6a6);background:var(--dialog,#f6f7f0);color:var(--text,#263a40)}
dialog input{border-color:var(--border,#bbc6b4);background:var(--surface,#fff);color:var(--text,#263a40)}
#new-file-error{color:var(--error,#a13d20)}
:root[data-theme="contrast"] #editor:focus{box-shadow:inset 0 0 0 2px var(--focus)}
:root[data-theme="contrast"] button:disabled{opacity:1;color:#bdbdbd;border-style:dashed}
:root[data-theme="contrast"] #jamo-keys button:disabled small{color:#bdbdbd}

#settings-dialog{width:min(calc(100% - 32px),900px);max-width:none;max-height:85vh;max-height:85dvh;overflow:auto;padding:0;overscroll-behavior:contain;scrollbar-gutter:stable}
#settings-dialog::backdrop{background:#071715a6}
.settings-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;background:var(--dialog,#f6f7f0);border-bottom:1px solid var(--border,#c7ccc7)}
.settings-header h2{margin:0;font-size:20px}
.settings-header button{flex-shrink:0;min-width:44px;min-height:44px}
.settings-body{padding:0 24px 24px}
.settings-section{margin:22px 0 0;padding:0 0 22px;border:0;border-bottom:1px solid var(--border,#c7ccc7);min-width:0}
.settings-section:last-child{border-bottom:0;padding-bottom:0}
.settings-section h3,.settings-section legend{margin:0 0 12px;padding:0;font-size:15px;font-weight:700}
.settings-section>p,.settings-help{font-size:12px;line-height:1.8;color:var(--muted,#546058);margin:8px 0 14px;overflow-wrap:anywhere}
.settings-section fieldset{min-width:0;margin:12px 0;padding:14px;border:1px solid var(--border,#c7ccc7);border-radius:6px}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#settings-dialog label{font-size:13px;line-height:1.6;min-width:0;overflow-wrap:anywhere}
#settings-dialog input,#settings-dialog select,#settings-dialog button{min-height:44px}
#settings-dialog input,#settings-dialog select{max-width:100%;width:100%;margin:6px 0 0;border-radius:5px}
#settings-dialog input[type="checkbox"],#settings-dialog input[type="radio"]{display:inline-block;width:20px;height:20px;min-height:20px;flex:0 0 20px;margin:0;accent-color:var(--accent)}
#settings-dialog input[type="range"]{padding:0;background:transparent}
#settings-dialog input[type="color"]{padding:5px;cursor:pointer}
#settings-dialog select{padding:9px}
.settings-check{display:flex!important;align-items:center;gap:10px;min-height:44px}
.settings-check span{min-width:0}
.settings-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.settings-inline>*{min-width:0}
.settings-inline input[type="number"]{max-width:120px}
.settings-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
.settings-actions button{flex:0 1 auto}
.settings-actions select{width:auto!important;min-width:150px}
.settings-status{font-size:12px;line-height:1.7;min-height:1.7em;margin:10px 0;color:var(--muted,#546058);overflow-wrap:anywhere}
.settings-error{color:var(--error,#a13d20)!important}
.symbol-list{display:grid;gap:8px;margin-top:12px}
.symbol-row{display:grid;grid-template-columns:60px 40px minmax(75px,.8fr) minmax(110px,1fr) minmax(140px,1.35fr);align-items:center;gap:10px;padding:10px;border:1px solid var(--border,#c7ccc7);border-radius:6px;background:var(--surface,#f8f8f3);min-width:0}
.symbol-row>*{min-width:0}
.symbol-row>label:first-child{display:flex;justify-content:center;align-items:center;gap:6px;min-width:44px;min-height:44px;white-space:nowrap}
.symbol-row .symbol-key,.symbol-row>code{font-size:24px;text-align:center;background:transparent;padding:0}
.symbol-row .symbol-name{font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.symbol-row input,.symbol-row select{font-size:12px}
.symbol-row label{font-size:11px!important}
.symbol-row.is-disabled{border-style:dashed}
.symbol-row.is-disabled .symbol-key{text-decoration:line-through}
.symbol-row .symbol-aliases{min-width:0}
.settings-footer{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;position:sticky;bottom:0;z-index:2;margin:0;padding:16px 24px;border-top:1px solid var(--border,#c7ccc7);background:var(--dialog,#f6f7f0)}
.settings-footer button{min-height:44px}
#settings-form{padding:20px 24px 24px}
.settings-heading{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;background:var(--dialog,#f6f7f0)}
.settings-heading h2{margin:0;font-size:20px}
.settings-heading button{flex-shrink:0;min-width:44px}
.settings-description,.settings-hint{font-size:12px;line-height:1.8;color:var(--muted,#546058);overflow-wrap:anywhere}
.settings-description{margin:12px 0 20px}
.settings-grid>.settings-section{margin:0;padding:16px;border:1px solid var(--border,#c7ccc7);border-radius:6px}
.settings-grid>.settings-section legend{padding:0 5px;margin:0}
.settings-grid>.settings-section>label:not(.check-label){margin-top:12px}
.check-label{display:flex!important;align-items:center;gap:10px;min-height:44px}
.settings-tools{display:flex;gap:8px;flex-wrap:wrap}
#settings-error{color:var(--error,#a13d20);font-size:12px;line-height:1.7;overflow-wrap:anywhere}
#settings-form>.settings-actions{position:sticky;bottom:0;z-index:2;justify-content:flex-end;background:var(--dialog,#f6f7f0);border-top:1px solid var(--border,#c7ccc7);margin:18px 0 0;padding:14px 0 0}
@media(max-width:680px){
  #settings-dialog{width:calc(100% - 20px);max-height:90vh;max-height:90dvh}
  .settings-header{padding:14px 16px;gap:10px}
  .settings-body{padding:0 16px 16px}
  .settings-grid{grid-template-columns:1fr;gap:12px}
  .settings-footer{padding:12px 16px}
  #settings-form{padding:10px 16px 16px}
  .settings-heading{gap:10px}
  .settings-grid>.settings-section{padding:12px}
  .symbol-row{grid-template-columns:60px 40px minmax(0,1fr);gap:8px;padding:10px}
  .symbol-row>:nth-child(4),.symbol-row>:nth-child(5){grid-column:1/-1}
  .symbol-row .symbol-name{font-size:13px}
}
@media(prefers-reduced-motion:reduce){#settings-dialog{scroll-behavior:auto}}