@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap");

:root{color-scheme:light;--paper:#eeeae2;--surface:#faf8f2;--ink:#171e20;--muted:#66716c;--line:#cbd0c7;--mint:#bdff62;--violet:#7770f5;--coral:#ff715e;font-family:"DM Sans","Noto Sans JP",sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:radial-gradient(circle at 12% 0%,#faf3e9 0,transparent 39%),var(--paper)}
button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,.preview-svg:focus-visible{outline:3px solid var(--violet);outline-offset:3px}a{color:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page{max-width:1660px;margin:auto;padding:36px clamp(18px,3.4vw,54px) 36px}
.hero{padding:6px 7px 42px}.eyebrow{display:flex;align-items:center;gap:11px;margin:0;color:#007c68;font:500 12px "DM Mono",monospace;letter-spacing:.11em}.brand-mark{position:relative;display:inline-block;width:20px;height:20px;border:2px solid var(--violet);border-radius:6px}.brand-mark::after{content:"";position:absolute;left:7px;top:7px;width:15px;height:15px;border-radius:5px;background:var(--mint);z-index:-1}
h1,h2,h3,p{margin-top:0}h1{margin:24px 0 22px;font-size:clamp(46px,7vw,116px);font-weight:800;line-height:.98;letter-spacing:0}h1 span{color:var(--violet)}.hero-bottom{display:flex;align-items:end;justify-content:space-between;gap:25px}.lead{max-width:980px;margin:0;font-size:clamp(18px,1.7vw,24px);font-weight:650;line-height:1.55}.lead strong{font-weight:800}.quiet-button{flex:none;min-height:44px;padding:0 17px;border:1px solid var(--ink);border-radius:11px;background:var(--surface);font-size:12px;font-weight:800;transition:transform .2s,box-shadow .2s}.quiet-button:hover{transform:translateY(-2px);box-shadow:0 5px 0 #171e202b}
.lab,.code-section,.guide{overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:0 14px 38px #111a1607}.section-heading{display:flex;align-items:center;gap:17px;min-height:91px;padding:17px 27px;border-bottom:1px solid var(--line)}.section-number{display:grid;place-items:center;flex:none;width:49px;height:49px;border-radius:14px;background:var(--coral);color:white;font:800 13px "DM Mono",monospace}.section-number--violet{background:var(--violet)}.section-number--dark{background:var(--ink);color:var(--mint)}.section-heading>div>p{margin:0 0 3px;color:#008674;font:500 11px "DM Mono",monospace;letter-spacing:.11em}.section-heading h2{margin:0;font-size:clamp(19px,2.1vw,28px);line-height:1.2;font-weight:800}.heading-chip{margin-left:auto;padding:9px 11px;border-radius:100px;background:#e8ebe4;color:var(--violet);font:500 10px "DM Mono",monospace;letter-spacing:.06em;white-space:nowrap}
.lab-grid{display:grid;grid-template-columns:294px minmax(0,1fr);min-height:680px}.controls{border-right:1px solid var(--line);background:#f4f1e9}.control-section{padding:22px 19px 20px;border-bottom:1px solid var(--line)}.control-section--last{border-bottom:0}.control-kicker{display:block;margin:0 0 7px;color:#007b69;font:500 11px "DM Mono",monospace;letter-spacing:.09em}.control-section h3{margin:0 0 15px;font-size:17px;line-height:1.25;font-weight:800}.source-list{display:grid;gap:7px}.source-list button{display:flex;align-items:center;gap:11px;width:100%;min-height:55px;padding:7px 10px;border:1px solid var(--line);border-radius:11px;background:#fdfbf5;text-align:left;transition:transform .2s,border-color .2s,background .2s}.source-list button:hover{transform:translateX(3px);border-color:#5f7468}.source-list button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:white}.source-list button>span:last-child{display:grid;gap:2px}.source-list strong{font-size:12px;font-weight:800}.source-list small{font-size:10px;color:#67716d}.source-list button[aria-pressed="true"] small{color:#b4c3bd}.scene-icon{display:grid;place-items:center;flex:none;width:37px;height:37px;border-radius:9px;background:#e8ebe5;color:var(--ink);font-size:17px;font-weight:800}.source-list button[aria-pressed="true"] .scene-icon{background:var(--mint)}.scene-icon--grid{background-color:#fff;background-image:linear-gradient(#232 1px,transparent 1px),linear-gradient(90deg,#232 1px,transparent 1px);background-size:9px 9px}.scene-icon--landscape{background:linear-gradient(145deg,#ffb088 0 45%,#61a69a 46% 65%,#124d59 66%)}.upload-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:41px;margin-top:10px;border:1px dashed #78897d;border-radius:10px;background:#eef2e9;font-size:11px;font-weight:800;cursor:pointer;transition:background .2s,transform .2s}.upload-button:hover{transform:translateY(-2px);background:#e0f3d6}.upload-button span{font-size:18px;line-height:0}.upload-button:has(+input:focus-visible){outline:3px solid var(--violet);outline-offset:3px}.control-note{margin:9px 0 0;color:#5e6b62;font-size:10px;line-height:1.65}
.preset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.preset-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:92px;padding:8px 3px;border:1px solid var(--line);border-radius:11px;background:#fdfbf5;text-align:center;transition:transform .2s,border-color .2s,background .2s}.preset-grid button:hover{transform:translateY(-3px);border-color:#738376}.preset-grid button[aria-pressed="true"]{border:2px solid var(--ink);background:#e8f6d8}.preset-grid strong{font-size:11px;line-height:1.2}.preset-grid small{font-size:10px;color:#67726c;line-height:1.3}.preset-glyph{display:block;width:35px;height:27px}.preset-glyph--water{background:repeating-radial-gradient(ellipse at 50% -4%,transparent 0 5px,#348cbd 6px 8px,transparent 9px 15px)}.preset-glyph--heat{background:repeating-linear-gradient(105deg,transparent 0 5px,#ff9a70 6px 8px,transparent 9px 14px);border-radius:50%}.preset-glyph--glass{border:2px solid #7069e8;border-radius:50%;background:linear-gradient(120deg,#ffffff 12%,#bfc1ff 25%,#ffffff 38%,#cdd0ff 72%,#ffffff 84%)}
.range-control{display:block;margin:0 0 17px}.range-control>span{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;font-size:11px;font-weight:800}.range-control output{color:#5954c6;font:500 11px "DM Mono",monospace;white-space:nowrap}input[type="range"]{width:100%;margin:0;accent-color:var(--violet);cursor:pointer}.position-details{margin-top:3px;border-top:1px solid var(--line);font-size:11px}.position-details summary{display:flex;justify-content:space-between;align-items:center;min-height:42px;font-weight:800;cursor:pointer;list-style:none}.position-details summary::-webkit-details-marker{display:none}.position-details summary span{font-size:18px;font-weight:400}.position-details[open] summary span{transform:rotate(180deg)}.position-details .range-control:last-child{margin-bottom:3px}
.workspace{display:flex;flex-direction:column;min-width:0;background:#dce4de}.workspace-toolbar{display:flex;align-items:center;gap:12px;min-height:53px;padding:8px 16px;border-bottom:1px solid #b5c4b9;background:#cfd9d1;color:#53665a;font:500 10px "DM Mono",monospace;letter-spacing:.04em}.workspace-toolbar strong{margin-left:auto;color:#316451}.window-dots{display:flex;gap:5px}.window-dots i{display:block;width:8px;height:8px;border-radius:50%;background:#ff716a}.window-dots i:nth-child(2){background:#ffc66e}.window-dots i:nth-child(3){background:#62d3a0}.stage-wrap{position:relative;display:grid;place-items:center;flex:1;min-height:590px;padding:22px;background-image:linear-gradient(#b9c9be55 1px,transparent 1px),linear-gradient(90deg,#b9c9be55 1px,transparent 1px);background-size:25px 25px}.preview-svg{display:block;width:min(100%,1060px);height:auto;aspect-ratio:960/620;border:2px solid #1b292d;border-radius:18px;background:#0d2c38;box-shadow:9px 11px 0 #24382d2c;touch-action:none;cursor:grab;user-select:none}.preview-svg:active{cursor:grabbing}.stage-hint{position:absolute;right:39px;bottom:38px;display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #dbe5d7aa;border-radius:9px;background:#142631cb;color:#fff;font-size:10px;font-weight:800;pointer-events:none}.hint-icon{font-size:17px;line-height:1}.workspace-foot{display:flex;justify-content:space-between;gap:15px;padding:0 22px 19px;color:#526357;font-size:10px;font-weight:700}.workspace-foot span:first-child{display:flex;align-items:center;gap:8px}.workspace-foot i{display:block;width:8px;height:8px;background:var(--mint);border:1px solid #415846}
.code-section,.guide{margin-top:22px}.code-grid{display:grid;grid-template-columns:minmax(260px,31%) minmax(0,1fr)}.code-intro{padding:27px;border-right:1px solid var(--line);background:#f3f1e9}.code-intro h3{margin:0 0 12px;font-size:22px}.code-intro p{font-size:12px;line-height:1.8;color:#536258}.layer-diagram{display:grid;gap:8px;max-width:330px;margin:25px 0}.layer-diagram span{display:grid;place-items:center;min-height:54px;padding:9px;border:1px solid #202b2b;border-radius:10px;background:#e6eddf;font-size:11px;font-weight:800;transform:rotate(-2deg)}.layer-diagram span:first-child{position:relative;left:12px;background:var(--mint);transform:rotate(2deg)}.code-intro .code-note{padding-top:14px;border-top:1px solid var(--line);font-size:11px}.code-panel{min-width:0;padding:27px;background:#1c2724;color:#f7faf3}.code-panel-head{display:flex;justify-content:space-between;align-items:end;gap:15px}.code-panel .control-kicker{color:var(--mint)}.code-panel h3{margin:0;font-size:20px}.code-tabs{display:flex;gap:4px;padding:4px;border-radius:10px;background:#35433b}.code-tabs button{min-height:35px;padding:0 11px;border:0;border-radius:7px;background:transparent;color:#bdcabf;font-size:11px;font-weight:800;white-space:nowrap}.code-tabs button:hover{color:#fff}.code-tabs button[aria-pressed="true"]{background:var(--mint);color:#1c2724}.code-description{min-height:32px;margin:16px 0 11px;color:#b9c8bc;font-size:11px;line-height:1.6}.code-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:49px;padding:7px 9px 7px 17px;border:1px solid #4c5b51;border-bottom:0;border-radius:11px 11px 0 0;background:#303e35;color:#b5c9b7;font:500 11px "DM Mono",monospace}.code-toolbar button,.code-actions button{min-height:36px;padding:0 12px;border:1px solid #e9f6e6;border-radius:8px;background:#f7faf2;color:#1b2723;font-size:11px;font-weight:800;transition:transform .2s,background .2s}.code-toolbar button:hover,.code-actions button:hover{transform:translateY(-2px);background:var(--mint)}.code-block{height:320px;margin:0;padding:20px;overflow:auto;border:1px solid #4c5b51;border-radius:0 0 11px 11px;background:#121b18;color:#cde7ca;font:400 11px/1.65 "DM Mono",monospace;white-space:pre;tab-size:2}.code-actions{display:flex;align-items:center;gap:13px;margin-top:15px}.code-actions button{background:transparent;color:#edf8e8;border-color:#829a86;white-space:nowrap}.code-actions span{color:#9eafa0;font-size:10px;line-height:1.5}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.guide-grid article{padding:26px;border-right:1px solid var(--line)}.guide-grid article:last-child{border-right:0}.guide-grid article>span{color:#00826c;font:500 11px "DM Mono",monospace;letter-spacing:.08em}.guide-grid h3{margin:8px 0 10px;font-size:18px}.guide-grid p{max-width:380px;margin:0;color:#5a675d;font-size:12px;line-height:1.8}.sources{margin:0;padding:0 26px 25px;color:#647067;font-size:11px}.sources a{text-decoration-thickness:1px;text-underline-offset:3px}.page-footer{display:flex;justify-content:space-between;gap:15px;padding:24px 8px 0;color:#69766c;font:500 10px "DM Mono",monospace;letter-spacing:.07em}.toast{position:fixed;z-index:20;left:50%;bottom:25px;max-width:calc(100vw - 36px);margin:0;padding:11px 15px;border:1px solid #405444;border-radius:10px;background:#1b2b22;color:#fff;font-size:12px;font-weight:800;box-shadow:0 12px 34px #0003;opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:opacity .2s,transform .2s}.toast[data-visible="true"]{opacity:1;transform:translate(-50%,0)}
@media(max-width:1100px){.lab-grid{grid-template-columns:265px minmax(0,1fr)}.stage-wrap{min-height:450px}.heading-chip{display:none}.lead{max-width:720px}.code-grid{grid-template-columns:270px minmax(0,1fr)}}
@media(max-width:760px){.page{padding:22px 14px 26px}.hero{padding:4px 3px 28px}h1{font-size:clamp(43px,10vw,72px);overflow-wrap:anywhere}.hero-bottom{align-items:start;flex-direction:column;gap:18px}.lead{font-size:17px}.lab,.code-section,.guide{border-radius:20px}.section-heading{min-height:75px;padding:14px 16px;gap:12px}.section-number{width:42px;height:42px;border-radius:12px}.lab-grid,.code-grid{grid-template-columns:minmax(0,1fr)}.controls{order:2;border-right:0;border-top:1px solid var(--line)}.workspace{order:1}.control-section{padding:20px}.source-list{grid-template-columns:repeat(3,minmax(0,1fr))}.source-list button{flex-direction:column;align-items:flex-start;gap:8px;min-height:96px}.source-list strong{font-size:11px}.source-list small{font-size:10px}.stage-wrap{min-height:0;padding:14px}.preview-svg{border-radius:12px}.stage-hint{right:26px;bottom:27px}.workspace-foot{padding:2px 15px 15px}.code-intro{border-right:0;border-bottom:1px solid var(--line)}.code-panel{padding:20px}.guide-grid{grid-template-columns:1fr}.guide-grid article{padding:20px;border-right:0;border-bottom:1px solid var(--line)}.guide-grid article:last-child{border-bottom:0}.sources{padding:5px 20px 22px}}
@media(max-width:520px){.eyebrow{font-size:10px}.source-list button{min-height:91px;padding:8px}.scene-icon{width:33px;height:33px}.stage-hint{right:22px;bottom:21px;padding:6px 8px;font-size:10px}.workspace-foot{flex-direction:column;gap:3px}.code-panel-head{align-items:start;flex-direction:column}.code-tabs{margin-top:4px}.code-actions{align-items:start;flex-direction:column}.page-footer{flex-direction:column;gap:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important}}