:root{--ink:#263c39;--muted:#72807a;--paper:#f6f4ee;--brass:#b49d78;--opening:.45;--night:0;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,summary,select{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #51766b;outline-offset:4px}.masthead{height:84px;padding:env(safe-area-inset-top) 6% 0;display:flex;align-items:center;justify-content:space-between;background:#f8f6f0}.brand{text-decoration:none;color:var(--ink);font-family:Georgia,serif;letter-spacing:.28em;font-size:24px}.brand span{display:block;font:8px -apple-system,sans-serif;letter-spacing:.36em;margin-top:5px}.simulation{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.12em;color:#64756b}.simulation i{width:5px;height:5px;border-radius:50%;background:#839579}.room{position:relative;height:590px;max-height:75svh;min-height:380px;overflow:hidden;background:linear-gradient(90deg,#b4ac9e,#e3ded2 12%,#d9d3c6 86%,#aaa291);isolation:isolate}.room:after{position:absolute;inset:0;content:"";background:#0b172d;opacity:calc(var(--night)*.48);pointer-events:none;z-index:9;transition:opacity 2s}.ceiling{position:absolute;left:0;top:0;width:100%;height:8%;background:linear-gradient(#c8beac,#ece5d4);clip-path:polygon(0 0,100% 0,89% 100%,11% 100%);box-shadow:0 9px 19px #58472d44}.wall-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 15.8%,#92867430 15.9%,#f7f3e930 16%)}.scene-caption{position:absolute;z-index:5;left:0;right:0;top:8%;text-align:center;color:#514e43}.scene-caption span{font-size:8px;letter-spacing:.28em}.scene-caption h1{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:20px;letter-spacing:.14em;font-weight:400;margin:9px 0}.window-surround{position:absolute;z-index:2;left:12%;right:12%;top:22%;height:53%;border:7px solid #9b896a;border-radius:130px 130px 4px 4px / 58px 58px 4px 4px;box-shadow:0 0 0 2px #c3b594,0 0 0 9px #e5dfd1,0 0 0 11px #ad9f87,0 14px 27px #61574955,inset 0 0 15px #332c20; background:#9aaeb0}.seaview{position:absolute;inset:0;overflow:hidden;border-radius:120px 120px 0 0 / 52px 52px 0 0;background:linear-gradient(#8aafb9,#e6d4b6 43%,#689595 44%,#305c60)}#ocean,.sea-fallback{position:absolute;width:100%;height:100%;inset:0;display:block}.sea-fallback{display:none;background:repeating-radial-gradient(ellipse at 35% 130%,transparent 0 15px,#c8e2dc22 16px 17px,transparent 18px 30px);background-size:180% 150%;animation:drift 16s linear infinite}.fallback .sea-fallback{display:block}.window-glass{position:absolute;top:0;bottom:0;width:50.5%;border:2px solid #b7ad90;box-shadow:inset 0 0 0 1px #faf5dd66;background:linear-gradient(115deg,#e0f4f111,transparent 24%,#f8fffd24 25%,transparent 31%,#cce6e511 60%,#fff4);transition:transform .18s ease-out;z-index:2}.glass-left{left:0;transform:translateX(calc(var(--opening)*-91%))}.glass-right{right:0;transform:translateX(calc(var(--opening)*91%))}.glass-left:after,.glass-right:after{content:"";position:absolute;top:56%;width:3px;height:27px;background:linear-gradient(90deg,#756546,#eee4c9,#958361);box-shadow:1px 1px 2px #0005;border-radius:3px}.glass-left:after{right:7px}.glass-right:after{left:7px}.window-sill{position:absolute;bottom:-13px;left:-14px;right:-14px;height:12px;background:linear-gradient(#e6d7b8,#b39d79);box-shadow:0 7px 9px #60554255}.window-rail{position:absolute;bottom:0;left:0;right:0;border-bottom:3px solid #a18e6a;z-index:3}.curtain{position:absolute;top:17%;bottom:18%;width:15%;z-index:3;background:repeating-linear-gradient(90deg,#d3c9b7 0%,#ebe4d7 12%,#a89c8844 24%,#e8dfce 37%);box-shadow:3px 3px 9px #6b614c33}.curtain-left{left:1%;clip-path:polygon(0 0,100% 0,64% 100%,0 100%)}.curtain-right{right:1%;transform:scaleX(-1);clip-path:polygon(0 0,100% 0,64% 100%,0 100%)}.floor{position:absolute;inset:75% 0 0;background:repeating-linear-gradient(94deg,transparent 0 55px,#37291b33 56px 58px),linear-gradient(#82715a,#a78e6d);clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}.rug{position:absolute;width:85%;height:17%;bottom:3%;left:7%;background:repeating-linear-gradient(0deg,#d1c4ab 0 1px,#c4b69e 1px 3px);border-radius:50%;opacity:.8;transform:rotate(-3deg)}.furniture{position:absolute;width:95%;height:auto;max-height:42%;bottom:4%;left:2.5%;z-index:5;overflow:visible}.light{position:absolute;top:34%;width:10px;height:62px;z-index:4;background:linear-gradient(90deg,#8b7759,#ece0be,#9d8664);border-radius:4px;box-shadow:0 0 18px 8px #ffdc8c70}.light:after{content:"";position:absolute;inset:9px 2px;background:#ffe6a9;box-shadow:0 0 26px 9px #ffdf9c88}.light-left{left:6%}.light-right{right:6%}.room-bottom{position:absolute;bottom:12px;left:6%;right:6%;display:flex;justify-content:space-between;font-size:7px;letter-spacing:.15em;z-index:10;color:#f3e9d6}.experience{padding:27px 6% 0;max-width:1100px;margin:auto}.intro{display:flex;align-items:center;justify-content:space-between;gap:16px}.eyebrow{font-size:8px;letter-spacing:.22em;color:#819087;margin:0 0 10px}h2{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:24px;letter-spacing:.07em;font-weight:400;margin:0}h2 span{display:block;font-family:-apple-system,sans-serif;font-size:11px;letter-spacing:.1em;color:var(--muted);margin-top:8px}.clock{text-align:right;flex-shrink:0}.clock time{font:27px Georgia,serif;font-variant-numeric:tabular-nums;letter-spacing:.05em}.clock span{display:block;font-size:9px;color:var(--muted);margin-top:7px}.controls{display:grid;grid-template-columns:1fr 118px;gap:25px;align-items:stretch;margin-top:25px;border-top:1px solid #dedfd4;padding-top:21px}.control-title{display:flex;justify-content:space-between;font-size:11px}.control-title output{font:13px Georgia,serif;color:#687a6d}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:34px;margin:8px 0 0;background:transparent;cursor:ew-resize;touch-action:pan-y}input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,#657d70 0%,#657d70 var(--range,45%),#d7dbcf var(--range,45%),#d7dbcf 100%);border-radius:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;background:#f9f7f0;border:1px solid #7b8d7f;border-radius:50%;box-shadow:0 2px 5px #243b3522}input[type=range]::-moz-range-track{height:3px;background:#aab8a7}input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#f9f7f0;border:1px solid #7b8d7f}.range-labels{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:-5px;font-size:9px;color:#879086}.range-labels button{border:0;background:transparent;color:#5b6e63;min-width:44px;min-height:44px;padding:0}.range-labels button:first-child{text-align:left}.range-labels button:last-child{text-align:right}.sound-button{border:1px solid #d5dbcd;border-radius:8px;background:#edf0e7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#425e52;min-height:108px;padding:10px 6px;font-size:11px}.sound-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.2}.sound-button small{font-size:8px;color:#718376}.sound-button[aria-pressed=true]{background:#405e53;color:#fff8e9}.sound-button[aria-pressed=true] small{color:#d1dbce}.notice{font-size:10px;color:#7c867d;margin:10px 0 25px;line-height:1.7;min-height:17px}.voyage{border-top:1px solid #dedfd4;border-bottom:1px solid #dedfd4;padding:0}summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:58px;font-size:11px}summary::-webkit-details-marker{display:none}.details-hint{font-size:8px;letter-spacing:.12em;color:#829083}.details-hint b{font-size:17px;font-weight:300;margin-left:10px}details[open] .details-hint b{display:inline-block;transform:rotate(45deg)}.settings{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.settings label{font-size:10px;color:#65776c}.settings select{display:block;width:100%;font-size:12px;margin-top:8px;background:#fffdf7;border:1px solid #d2d9ca;border-radius:5px;min-height:44px;padding:8px;color:#304d41}.voyage p{font-size:11px;line-height:1.8;color:#65776c}.voyage p.technical{font-size:9px;color:#838b82}footer{padding:24px 0 calc(22px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;font-size:7px;letter-spacing:.14em;color:#899083}footer span{letter-spacing:.05em}@keyframes drift{to{background-position:120px 35px}}@media(min-width:800px){.masthead{height:90px;padding-left:9%;padding-right:9%}.room{height:640px;max-height:72svh}.window-surround{left:21%;right:21%;top:22%;height:59%}.curtain-left{left:12%;width:14%}.curtain-right{right:12%;width:14%}.light-left{left:13%}.light-right{right:13%}.furniture{width:66%;left:17%;bottom:2%}.scene-caption h1{font-size:26px}.controls{grid-template-columns:1fr 200px}.experience{padding-left:10%;padding-right:10%}.room-bottom{font-size:9px}.window-surround{border-top-left-radius:140px 65px;border-top-right-radius:140px 65px}}@media(max-width:420px){.masthead{height:74px}.brand{font-size:21px}.room{height:450px;min-height:380px;max-height:61svh}.window-surround{left:9%;right:9%;top:25%;height:49%;border-width:5px}.curtain{width:12%;top:21%}.light-left{left:3%}.light-right{right:3%}.scene-caption{top:9%}.scene-caption h1{font-size:17px}.furniture{width:120%;left:-11%;bottom:4%}.controls{grid-template-columns:1fr 103px;gap:17px}.experience{padding-top:24px}h2{font-size:22px}.settings{grid-template-columns:1fr}.range-labels span{font-size:8px}}@media(max-width:340px){.range-labels span{display:none}.scene-caption h1{font-size:15px}.clock time{font-size:23px}h2{font-size:20px}.simulation{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.window-glass,.room:after{transition:none}.sea-fallback{animation:none}}
