@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@300;400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap";:root{--bg:#f4efe6;--bg-dark:#e3dccf;--bg-light:#fff;--text:#2f2a24;--text-black:#1a1714;--text-white:#ece7de;--text-muted:#6a6258;--accent:#0d7c86;--accent-strong:#d3624f;--surface:#fffaf1;--surface-strong:#f2ece1;--line:#221c161f;--shadow:#211c162e;--shadow-soft:#211c161f;--bar-default:#2c9a93;--bar-focus:#2f8a5a;--bar-compare:#c14a3e;--bar-temp:#c27a33;--bar-sorted:#4e8b4f;--bar-label:#fff;--bar-label-stroke:#080808d9;--font-sans:"IBM Plex Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;--font-display:"Space Grotesk","IBM Plex Sans JP","Hiragino Sans",sans-serif}*,*:before,*:after{box-sizing:border-box}html{min-width:320px;min-height:100%}body{color:var(--text);font-family:var(--font-sans);background-color:var(--bg);background-image:radial-gradient(circle at 12% 10%,#ffffffb3,#0000 45%),radial-gradient(circle at 88% 18%,#0d7c862e,#0000 50%),radial-gradient(circle at 80% 80%,#d3624f29,#0000 55%),linear-gradient(135deg,#f5f1e8 0%,#eef2f2 55%,#f9f4ea 100%);background-attachment:fixed;width:100%;margin:0}header{text-align:center;margin:36px auto 28px;padding:0 24px}header h1{color:var(--text-black);font-family:var(--font-display);letter-spacing:.12em;margin:0 0 8px;font-size:clamp(32px,6vw,56px);font-weight:700}.subtitle{color:var(--text-muted);font-size:clamp(14px,2.4vw,18px)}main{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:stretch;gap:24px;width:min(1240px,100%);margin:0 auto 40px;padding:0 24px}main>div{margin:0}.panel-header{display:flex;border-bottom:1px solid var(--line);background:#ffffffd1;justify-content:space-between;align-items: center;gap:12px;padding:12px 16px}.panel-title{font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--text-black);font-size:14px;font-weight:700}.panel-meta{letter-spacing:.18em;color:var(--text-muted);text-transform:uppercase;font-size:11px}.section-title{letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase;margin:0 0 10px;font-size:12px;font-weight:600}.number-input{display:flex;align-items: center;gap:10px}.number-input label{position:static;letter-spacing:.06em;color:var(--text-muted);font-size:12px;font-weight:600}.number-input input{border:1px solid var(--line);color:var(--text-black);background:#fffdf9;border-radius:10px;width:64px;padding:7px 10px;font-size:15px;box-shadow:inset 0 1px 4px #211c161f}.number-input input::placeholder{color:var(--text-muted)}.number-input input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #0d7c862e,inset 0 1px 4px #211c161f}.neum-btn{border:1px solid var(--line);box-shadow:0 10px 18px var(--shadow-soft);color:var(--accent);cursor:pointer;display:grid;background:linear-gradient(145deg,#fffdf7,#efe7db);border-radius:50%;place-items: center;width:52px;height:52px;margin:0;padding:0;transition:transform .2s,box-shadow .2s,color .2s}.neum-btn svg{width:20px;height:20px}.neum-btn:hover{box-shadow:0 14px 22px var(--shadow);color:var(--accent-strong);transform:translateY(-2px)}.neum-btn:active{box-shadow:0 6px 12px var(--shadow-soft);transform:translateY(1px)}.neum-btn:focus-visible{outline:3px solid #0d7c8659;outline-offset:2px}.primary-btn{display:inline-flex;color:var(--text-white);font-family:var(--font-display);letter-spacing:.08em;cursor:pointer;background:linear-gradient(135deg,#0d7c86 0%,#1392a0 55%,#17a7b3 100%);border:1px solid #0d7c8673;border-radius:999px;align-items: center;gap:10px;height:46px;padding:10px 18px;transition:transform .2s,box-shadow .2s,filter .2s;font-weight:600;box-shadow:0 12px 22px #0d7c8647}.primary-btn svg{width:18px;height:18px}.primary-btn .btn-label{text-transform:uppercase;white-space:nowrap;font-size:12px}.primary-btn:hover{filter:brightness(1.03);transform:translateY(-1px);box-shadow:0 16px 26px #0d7c8652}.primary-btn:active{transform:translateY(1px);box-shadow:0 8px 16px #0d7c8638}.primary-btn:focus-visible{outline:3px solid #0d7c8659;outline-offset:2px}.primary-btn:disabled{cursor:not-allowed;opacity:.6;box-shadow:none;filter:none}#editor{display:grid;grid-template-rows:auto auto 1fr;overflow:hidden;box-shadow:0 18px 40px var(--shadow);animation:rise-in .7s ease both;animation-delay:50ms;background:#272822;border:1px solid #110f0c59;border-radius:18px;flex:1 1 0;width:100%;max-width:620px}#editor .panel-header{background:#1f201b;border-bottom:1px solid #2f3028}#editor .panel-title{color:#f2ede2}#editor .panel-meta{color:#9d9689}.editor-toolbar{display:grid;background:#1f201b;border-bottom:1px solid #2f3028;gap:10px;padding:12px 16px}.editor-toolbar .section-title{color:#9d9689;margin:0}#editor .examples-note{color:#9d9689}.editor-body{display:grid;grid-template-columns:52px 1fr;overflow:hidden;min-height:0}#editor-lines{color:#8d8a82;text-align:right;white-space:pre;user-select:none;overflow:hidden;background:#1f201b;border-right:1px solid #2f3028;min-height:0;padding:16px 10px;font-family:JetBrains Mono,Menlo,Monaco,SFMono-Regular,Consolas,Liberation Mono,Courier New,monospace;font-size:14px;line-height:1.6}#editor-code{text-shadow:none;color:#f8f8f2;overflow:auto;tab-size:2;background:#272822;min-height:0;padding:16px;font-family:JetBrains Mono,Menlo,Monaco,SFMono-Regular,Consolas,Liberation Mono,Courier New,monospace;font-size:14px;line-height:1.6}#editor-code .hljs-comment{color:#75715e}#editor-code .hljs-keyword,#editor-code .hljs-selector-tag,#editor-code .hljs-title,#editor-code .hljs-section,#editor-code .hljs-doctag,#editor-code .hljs-name{color:#f92672}#editor-code .hljs-string,#editor-code .hljs-attr,#editor-code .hljs-addition{color:#e6db74}#editor-code .hljs-number,#editor-code .hljs-literal{color:#ae81ff}#editor-code .hljs-built_in,#editor-code .hljs-type{color:#66d9ef}#editor-code .hljs-function,#editor-code .hljs-params{color:#a6e22e}.result{display:grid;text-align:left;background:var(--surface);border:1px solid var(--line);box-shadow:0 16px 36px var(--shadow-soft);overflow:hidden;animation:rise-in .7s ease both;animation-delay:.12s;border-radius:18px;flex:1 1 0;gap:16px;width:100%;max-width:620px;padding:0 0 22px}.result .panel-header{background:linear-gradient(135deg,#fffffff2,#ffffffbf);padding:14px 20px}.result .settings{flex:1;padding:0 20px}.result .settings fieldset{display:grid;border:none;gap:10px;margin:0;padding:0}.result .settings legend{letter-spacing:.12em;color:var(--text-muted);text-transform:uppercase;padding:0;font-size:12px;font-weight:600}.result .settings .array-patterns{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.result .settings .array-patterns .array-pattern{display:flex;background:#ffffffb3;border:1px solid #221c1614;border-radius:10px;align-items: center;gap:6px;padding:8px 10px}.result .settings .array-patterns .array-pattern input{vertical-align:middle;accent-color:var(--accent);margin-right:0}.result .settings .generate{display:flex;justify-content:space-between;align-items: center;gap:16px;margin:16px 0 0}.examples-row{display:flex;flex-wrap:wrap;align-items: center;gap:12px}#example-select{border:1px solid var(--line);color:var(--text-black);background:#fffdf9;border-radius:10px;flex:200px;min-width:200px;height:46px;padding:8px 12px;font-size:14px;box-shadow:inset 0 1px 4px #211c161f}#example-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #0d7c862e,inset 0 1px 4px #211c161f}.examples-note{color:var(--text-muted);font-size:12px}.settings-card{background:var(--surface-strong);border:1px solid var(--line);display:grid;border-radius:14px;gap:14px;padding:16px}.result .view{color:#f4f1e9;overflow:hidden;background:#1d221f;border-radius:14px;flex:3;margin:0 20px;box-shadow:inset 0 0 0 1px #ffffff0f}.view-head{display:flex;background:#ffffff05;border-bottom:1px solid #ffffff14;flex-wrap:wrap;justify-content:space-between;align-items: center;gap:12px;padding:14px 16px}.view-label{letter-spacing:.14em;text-transform:uppercase;color:#ffffffb8;font-size:12px}.view-metrics{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items: center;gap:8px}.view-chip{display:inline-flex;letter-spacing:.04em;color:#8de0e6;background:#8de0e629;border:1px solid #8de0e666;border-radius:999px;align-items: center;padding:4px 10px;font-size:12px;font-weight:600}.view-chip--meta{color:#f1d8b5;background:#f1d8b524;border-color:#f1d8b573}#log{overflow-x:auto;overflow-y:hidden;background-image:linear-gradient(#ffffff0d 1px,#0000 1px),linear-gradient(90deg,#ffffff0a 1px,#0000 1px);background-size:24px 24px;border-top:1px solid #ffffff14;height:240px;padding:12px}#log svg{display:block;margin:0 auto}.error-log{border:1px solid var(--line);color:var(--text-muted);white-space:pre-wrap;background:#f6f1e8;border-radius:12px;min-height:40px;margin:0 20px;padding:10px 12px;font-size:12px;line-height:1.5}.error-log[data-state=error]{color:#a33b2c;background:#fff1ee;border-color:#d3624f73}.result .control{display:grid;flex:1;align-items: center;gap:12px;padding:0 20px}.control-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items: center;gap:12px}.control-buttons{display:flex;flex-wrap:wrap;justify-content:center;align-items: center;gap:10px}.description{background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 26px var(--shadow-soft);grid-column:1/-1;animation:rise-in .7s ease both;animation-delay:.2s;border-radius:16px;width:min(1160px,100%);margin:16px auto 0;padding:16px 20px 20px}.description .usage{letter-spacing:.14em;text-align:left;color:var(--text-black);margin:0 0 8px;font-weight:700}.usage-note{color:var(--text-muted);margin-top:10px;font-size:12px;line-height:1.6}.usage-note code{background:#ffffffb3;border:1px solid #221c161a;border-radius:6px;padding:2px 6px;font-family:JetBrains Mono,Menlo,Monaco,SFMono-Regular,Consolas,Liberation Mono,Courier New,monospace}.legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px}.legend-item{display:inline-flex;color:var(--text-muted);align-items: center;gap:6px;font-size:12px}.legend-swatch{display:inline-block;border:1px solid #0003;border-radius:3px;width:12px;height:12px}.legend-swatch--i{background:green}.legend-swatch--j{background:red}.legend-swatch--temp{background:DarkRed}.legend-swatch--greens{background:OliveDrab}.legend-swatch--default{background:#40e0d0}footer{text-align:center;color:var(--text-muted);animation:fade-in .7s ease both;animation-delay:.26s;margin:32px 0 24px}footer a{text-decoration:none;color:var(--text-muted)}footer a:hover{color:var(--text)}footer a svg{vertical-align:middle;width:16px;margin-right:3px}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (min-width:980px){main{grid-template-columns:repeat(2,minmax(0,1fr))}#editor{min-width:480px}.result{min-width:420px}}@media (max-width:900px){main{padding:0 16px 32px}.result .panel-header{padding:14px 16px}.result .settings,.result .control{padding:0 16px}.result .view,.error-log{margin:0 16px}}@media (max-width:700px){header{margin:28px auto 18px}.result .settings .generate{flex-wrap:wrap;justify-content:center}.control-row{justify-content:center}}@media (max-width:520px){.neum-btn{width:44px;height:44px}.neum-btn svg{width:18px;height:18px}.number-input input{width:56px}#log{height:200px}.editor-body{grid-template-columns:44px 1fr}.primary-btn{height:42px;padding:8px 14px}.primary-btn .btn-label{font-size:11px}#example-select{height:42px}}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}