.site-header__skip{z-index:30;color:#07131b;background:#b8f0f3;border-radius:6px;padding:10px 16px;font:700 .875rem/1.4 system-ui,sans-serif;position:absolute;top:-100px;left:12px}.site-header__skip:focus-visible{outline-offset:2px;outline:3px solid #fff;top:8px}.site-header{color:#e8f5f6;background:#0b1420;border-bottom:1px solid #a6d0dc29;width:100%;font-family:system-ui,-apple-system,Hiragino Sans,Yu Gothic,sans-serif}.site-header__inner{justify-content:space-between;align-items:center;gap:18px;width:min(1500px,100%);min-width:0;margin:0 auto;padding:8px clamp(16px,4vw,68px);display:flex}.site-header a{min-height:44px;color:inherit;white-space:nowrap;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.site-header a:focus-visible{outline-offset:2px;border-radius:4px;outline:2px solid #a4edf2}.site-header__brand{letter-spacing:.1em;flex:none;gap:9px;font-size:.77rem;font-weight:700}.site-header__mark{grid-template-columns:repeat(2,5px);gap:2px;display:grid;transform:rotate(-12deg)}.site-header__mark span{border:1px solid #8fe7ed;border-radius:1px;width:5px;height:5px}.site-header__mark span:first-child,.site-header__mark span:last-child{background:#8fe7ed}.site-header__nav{align-items:center;gap:clamp(4px,1vw,20px);font-size:.79rem;display:flex}.site-header__nav a{color:#b8cbd3;padding:0 10px}.site-header__nav a:hover,.site-header__brand:hover{color:#a4edf2}@media (width<=620px){.site-header__inner{padding:5px 12px 6px;display:block}.site-header__brand{min-height:38px}.site-header__nav{text-align:center;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;width:100%;font-size:.72rem;display:grid}.site-header__nav a{min-width:0;padding:0 2px}}.site-ad-slot[hidden]{display:none!important}.site-ad-slot__inner{width:min(1500px,100%);margin:0 auto;padding:24px clamp(16px,4vw,68px)}.site-ad-slot__label{color:#aebfc9;margin-bottom:8px;font:400 .75rem/1.5 system-ui,sans-serif;display:block}.site-footer{color:#aebfc9;background:#0b1420;border-top:1px solid #a6d0dc29;width:100%;margin:0;padding:0;font:400 .78rem/1.5 system-ui,-apple-system,Hiragino Sans,Yu Gothic,sans-serif;display:block}.site-footer__inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 16px;width:min(1500px,100%);min-height:58px;margin:0 auto;padding:6px clamp(16px,4vw,68px);display:flex}.site-footer a{color:#c1d4dc;align-items:center;min-height:44px;text-decoration:none;display:inline-flex}.site-footer a:hover{color:#a4edf2}.site-footer a:focus-visible{outline-offset:2px;border-radius:4px;outline:2px solid #a4edf2}:root{color:#e9f3f4;font-synthesis:none;background:#0b1721;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,sans-serif}*{box-sizing:border-box}body{min-width:300px;margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline-offset:3px;outline:2px solid #8fe0ed}.app{max-width:1510px;margin:auto;padding:66px clamp(18px,5vw,78px) 64px}.hero{justify-content:space-between;align-items:end;gap:36px;margin-bottom:36px;display:flex}.eyebrow{letter-spacing:.22em;color:#71bfce;margin:0;font-size:11px;font-weight:700}.hero h1{letter-spacing:.07em;margin:15px 0 0;font-size:clamp(38px,4.5vw,69px);font-weight:500;line-height:1.2}.title-star{color:#85d9e5;vertical-align:top;margin:3px 0 0 14px;font-size:.34em;display:inline-block}.hero-copy{color:#a3b8c2;max-width:350px;margin:0 0 7px;font-size:14px;line-height:1.95}.workspace{grid-template-columns:minmax(0,1fr) 286px;align-items:stretch;gap:20px;display:grid}.stage-shell,.controls{background:#111f2a;border:1px solid #29404c;border-radius:16px;overflow:hidden}.stage-shell{min-width:0}.stage-bar,.stage-bottom{color:#8ca9b7;letter-spacing:.1em;justify-content:space-between;align-items:center;gap:14px;height:52px;padding:0 23px;font-size:10px;display:flex}.stage-label{color:#c0d8df;white-space:nowrap;align-items:center;gap:12px;font-weight:700;display:flex}.live-dot{background:#81d7dc;border-radius:50%;width:7px;height:7px;box-shadow:0 0 13px #81d7dc}.bar-divider{border-left:1px solid #3a5260;height:13px}.state-label{letter-spacing:.02em;white-space:nowrap}.canvas-wrap{background:radial-gradient(at 50% 44%,#172d3c 0%,#10222f 44%,#0b1925 100%);height:clamp(400px,47vw,640px);position:relative;overflow:hidden}.canvas-wrap:before{content:"";pointer-events:none;background-image:linear-gradient(#82cddd0c 1px,#0000 1px),linear-gradient(90deg,#82cddd0c 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#000 20% 80%,#0000);mask-image:linear-gradient(#0000,#000 20% 80%,#0000)}canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block;position:absolute;inset:0}.canvas-corner{opacity:.55;pointer-events:none;border-color:#5a8997;width:28px;height:28px;position:absolute}.canvas-corner--tl{border-top:1px solid;border-left:1px solid;top:20px;left:20px}.canvas-corner--tr{border-top:1px solid;border-right:1px solid;top:20px;right:20px}.canvas-corner--bl{border-bottom:1px solid;border-left:1px solid;bottom:20px;left:20px}.canvas-corner--br{border-bottom:1px solid;border-right:1px solid;bottom:20px;right:20px}.canvas-hint{pointer-events:none;white-space:nowrap;color:#89aab8;letter-spacing:.08em;align-items:center;gap:10px;font-size:11px;display:flex;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.hint-icon{color:#87d6df;font-size:17px}.stage-bottom{letter-spacing:.08em;border-top:1px solid #29404c;height:48px}.controls{flex-direction:column;padding:24px;display:flex}.control-header{justify-content:space-between;align-items:center;display:flex}.control-mark{color:#6bc5d1;font-family:Georgia,serif;font-size:34px;line-height:1}.control-intro{border-bottom:1px solid #314550;padding:40px 0 32px}.control-intro h2{letter-spacing:.06em;margin:0 0 13px;font-size:26px;font-weight:500}.control-intro p{color:#95adba;margin:0;font-size:12px;line-height:1.8}.slider-group{padding-top:30px}.slider-group label{justify-content:space-between;gap:10px;font-size:13px;font-weight:600;display:flex}.slider-group output{color:#8fdce6;font-size:11px;font-weight:400}.slider-group input{accent-color:#8ad9e4;cursor:pointer;width:100%;margin:19px 0 9px;display:block}.range-ends{color:#718b9b;justify-content:space-between;font-size:10px;display:flex}.control-actions{gap:9px;margin-top:32px;display:grid}.control-actions button{border-radius:8px;justify-content:space-between;align-items:center;min-height:45px;padding:0 14px;font-size:12px;font-weight:700;display:flex}.primary-button{color:#102731;background:#9bdfe7;border:1px solid #a0e7ee}.secondary-button{color:#d4e8ec;background:#192e3b;border:1px solid #43606c}.text-button{color:#92b2c0;background:0 0;border:0}.primary-button:hover{background:#c0f0f1}.secondary-button:hover{background:#253f4d}.text-button:hover{color:#e9f3f4}.control-note{color:#7796a6;margin:auto 0 0;padding-top:30px;font-size:11px;line-height:1.7}.local-note{color:#7395a4;text-align:right;margin:25px 0 0;font-size:11px}.local-note span{color:#8ad9e4;margin-left:9px}@media (width<=940px){.workspace{grid-template-columns:1fr}.controls{grid-template-columns:1fr 1fr;gap:0 32px;display:grid}.control-header,.control-intro,.control-actions,.control-note{grid-column:1/-1}.control-intro{padding:20px 0}.control-actions{grid-template-columns:1fr 1fr auto}.control-note{padding-top:15px}.canvas-wrap{height:clamp(420px,62vw,610px)}}@media (width<=560px){.app{padding:34px 14px 43px}.hero{margin-bottom:25px;display:block}.hero h1{font-size:42px}.hero-copy{margin:17px 0 0;font-size:12px}.workspace{gap:12px}.stage-bar,.stage-bottom{padding:0 14px}.stage-label{gap:7px}.state-label{font-size:9px}.canvas-wrap{height:min(62vh,560px);min-height:390px}.controls{padding:20px;display:flex}.control-intro{padding:25px 0 17px}.slider-group{padding-top:22px}.control-actions{grid-template-columns:1fr 1fr;margin-top:26px;display:grid}.control-actions .text-button{grid-column:1/-1}.control-note{padding-top:20px}.local-note{text-align:left}}@media (width<=360px){.bar-divider,#stroke-count{display:none}.stage-bottom{font-size:9px}}.ripple-control{cursor:pointer;border-top:1px solid #314550;border-bottom:1px solid #314550;justify-content:space-between;align-items:center;gap:12px;margin-top:29px;padding:17px 0;display:flex;position:relative}.ripple-control__copy{gap:5px;display:grid}.ripple-control__copy strong{font-size:13px;font-weight:600}.ripple-control__copy small{color:#8ba6b4;font-size:10px;line-height:1.45}.ripple-control input{opacity:0;cursor:pointer;width:42px;height:26px;margin:0;position:absolute;right:0}.ripple-control__switch{background:#478d99;border:1px solid #8bd4dc;border-radius:20px;flex:0 0 42px;width:42px;height:26px;transition:background .2s;position:relative}.ripple-control__switch:after{content:"";background:#e9f7f7;border-radius:50%;width:18px;height:18px;transition:left .2s;position:absolute;top:3px;left:20px}.ripple-control input:not(:checked)+.ripple-control__switch{background:#253c49;border-color:#546e7a}.ripple-control input:not(:checked)+.ripple-control__switch:after{left:3px}.ripple-control input:focus-visible+.ripple-control__switch{outline-offset:3px;outline:2px solid #8fe0ed}@media (width<=940px){.ripple-control{grid-column:1/-1}}@media (width<=560px){.ripple-control{margin-top:24px}}.ripple-control+.ripple-control{border-top:0;margin-top:0}.canvas-wrap--water{background:linear-gradient(158deg,#0a1b28 0%,#153d46 45%,#10313d 67%,#081b27 100%)}.canvas-wrap--water:before{opacity:0}.color-picker{border:0;min-width:0;margin:27px 0 0;padding:0}.color-picker legend{color:#e2f0f1;padding:0;font-size:13px;font-weight:600}.color-picker p{color:#8ba6b4;margin:7px 0 12px;font-size:10px}.color-picker__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.color-choice{cursor:pointer;min-width:0;position:relative}.color-choice input{opacity:0;width:1px;height:1px;position:absolute}.color-choice__tile{color:#c4d9df;background:#152c38;border:1px solid #365260;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:61px;padding:5px 2px;display:flex}.color-choice__swatch{background:var(--swatch);width:18px;height:18px;box-shadow:0 0 9px var(--swatch);border-radius:50%;display:block}.color-choice__name{white-space:nowrap;font-size:10px}.color-choice__selected{color:#b8f1f3;white-space:nowrap;font-size:9px;font-weight:700;display:none}.color-choice input:checked+.color-choice__tile{background:#234654;border-color:#a9e9ed}.color-choice input:checked+.color-choice__tile .color-choice__selected{display:block}.color-choice input:focus-visible+.color-choice__tile{outline-offset:3px;outline:2px solid #a9e9ed}@media (width<=940px){.color-picker{grid-column:1/-1}}@media (width<=560px){.color-picker{margin-top:24px}}