:root{--paper:#f7f3ec;--white:#fffefa;--ink:#294b65;--blue:#487fa8;--peach:#f4a38b;--muted:#596d7c;--line:#d8d5cf;--sand:#eee8df;--shadow:#294b6518}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 system-ui,'Segoe UI',sans-serif}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,video:focus-visible{outline:3px solid var(--blue);outline-offset:3px}[hidden]{display:none!important}.preview-flag{background:var(--ink);color:#fff;text-align:center;padding:7px 12px;font-size:11px;letter-spacing:.13em}.topbar{display:flex;align-items:center;gap:28px;min-height:76px;padding:12px clamp(18px,5vw,82px);border-bottom:1px solid var(--line);background:var(--white)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:30px Georgia,serif}.brand img{display:block}.topbar nav{display:flex;gap:24px;margin-left:auto}.topbar nav a{text-decoration:none;font-size:13px}.topbar nav a:hover{text-decoration:underline}.lang-button{background:transparent;border:1px solid var(--line);color:var(--ink);padding:8px 12px;min-height:44px}.eyebrow{margin:0;color:var(--blue);font-size:11px;letter-spacing:.18em;font-weight:700}.introduction{max-width:1440px;margin:auto;padding:64px clamp(18px,5vw,82px) 38px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:8%;align-items:end}.introduction h1,.after-room h2{font:normal clamp(40px,5.5vw,74px)/1.05 Georgia,serif;letter-spacing:-.035em;margin:15px 0 20px}.introduction>div>p:last-child{max-width:730px;margin:0;color:var(--muted);font-size:17px}.introduction aside{border-left:2px solid var(--peach);padding-left:20px;color:var(--muted);font-size:13px}.introduction aside strong{display:block;color:var(--ink);letter-spacing:.12em;font-size:11px;margin-bottom:8px}.piece-switch{max-width:1280px;margin:0 auto;padding:0 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.piece-switch button{text-align:left;min-height:92px;background:var(--white);border:1px solid var(--line);color:var(--ink);padding:16px 20px;transition:background .2s,transform .2s}.piece-switch button:hover{transform:translateY(-2px)}.piece-switch button[aria-pressed=true]{border-color:var(--ink);background:#eaf0f3}.piece-switch small{display:block;font-size:10px;letter-spacing:.16em;color:var(--muted);margin-bottom:5px}.piece-switch span{display:block;font:24px Georgia,serif}.room{max-width:1280px;margin:14px auto 0;border:1px solid var(--line);background:var(--white);box-shadow:0 20px 60px var(--shadow)}.room-head{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:30px clamp(20px,4vw,52px);border-bottom:1px solid var(--line)}.room-head h2{font:normal clamp(31px,3.4vw,48px)/1.1 Georgia,serif;margin:8px 0}.room-head p:last-child{margin:0;color:var(--muted);font-size:14px}.price{text-align:right;flex:none}.price b{display:block;font:32px Georgia,serif}.price span{display:block;font-size:10px;letter-spacing:.1em;margin-top:7px}.stage-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.stage-tabs button{text-align:left;border:0;border-right:1px solid var(--line);border-bottom:3px solid transparent;background:var(--white);color:var(--muted);padding:16px 22px;min-height:68px}.stage-tabs button:last-child{border-right:0}.stage-tabs button[aria-selected=true]{border-bottom-color:var(--blue);color:var(--ink);background:#f0f4f6}.stage-tabs small{display:block;font-size:10px;letter-spacing:.15em;margin-bottom:2px}.stage-tabs span{font-size:14px}.panel-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);min-height:650px}.stage-panels{position:relative;min-width:0;background:#e4e2dc}.stage-panel{min-height:650px}.scene-panel figure{margin:0;height:100%;position:relative;overflow:hidden}.scene-panel img{display:block;width:100%;height:650px;object-fit:cover;object-position:center 44%}.scene-panel figcaption{position:absolute;left:18px;bottom:18px;padding:8px 11px;background:rgba(255,254,250,.94);font-size:11px;max-width:calc(100% - 36px)}.film-frame{height:650px;display:grid;place-items:center;padding:22px;background:#2f3f49}.film-frame video{display:block;max-height:594px;max-width:100%;aspect-ratio:9/16;background:#131b1d;object-fit:contain}.evidence-tag{position:absolute;left:17px;bottom:16px;margin:0;padding:8px 11px;background:rgba(255,254,250,.95);font-size:10px;letter-spacing:.06em;max-width:calc(100% - 34px)}.detail-frame{height:650px;overflow:hidden;position:relative;display:grid;place-items:center;background:#e5e5e0}.detail-frame img{width:100%;height:100%;object-fit:contain}.detail-mark{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0 50%,rgba(255,254,250,.06) 50%)}.record-panel{background:linear-gradient(135deg,#fffefa,#f0ede6);padding:52px clamp(24px,5vw,68px)}.record-mark{font-size:76px;line-height:1;margin-bottom:55px}.record-panel h3{font:normal 42px Georgia,serif;margin:9px 0 22px}.record-panel p{max-width:580px}.record-panel dl{margin-top:55px}.record-panel dl div{display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding:12px 0;font-size:13px}.record-panel dt{color:var(--muted)}.record-panel dd{margin:0;text-align:right}.stage-copy{padding:48px clamp(24px,4vw,54px);display:flex;flex-direction:column}.stage-copy h3{font:normal clamp(30px,3vw,44px)/1.15 Georgia,serif;margin:14px 0 22px}.stage-copy>p:not(.eyebrow){color:var(--muted);font-size:15px;margin:0}.look-list{display:grid;gap:9px;margin:25px 0}.look-list button{min-height:46px;text-align:left;padding:10px 13px;background:transparent;border:1px solid var(--line);color:var(--ink);font-size:13px}.look-list button[aria-pressed=true]{background:var(--sand);border-color:var(--blue)}.look-list:empty{display:none}.stage-copy .plain-note{border-left:2px solid var(--peach);padding-left:15px;margin-top:20px!important;font-size:12px!important}.stage-actions{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding-top:28px}.stage-actions button{min-height:44px;padding:9px 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:13px}.stage-actions button:last-child{background:var(--ink);color:#fff;display:flex;gap:20px}.stage-actions button:disabled{opacity:.45;cursor:default}.after-room{max-width:1060px;margin:0 auto;padding:90px 25px}.after-room h2{font-size:clamp(34px,4vw,55px)}.after-room>p:last-child{max-width:800px;color:var(--muted);margin:0}footer{padding:28px 5%;border-top:1px solid var(--line);font-size:12px}footer a{margin-left:12px}@media(max-width:830px){.introduction{grid-template-columns:1fr;padding-top:42px}.introduction aside{max-width:650px}.panel-grid{grid-template-columns:1fr}.stage-panel,.scene-panel img,.film-frame,.detail-frame{height:520px;min-height:520px}.film-frame video{max-height:476px}.stage-copy{min-height:390px}.room{margin-inline:18px}.piece-switch{padding-inline:18px}}@media(max-width:600px){.topbar{flex-wrap:wrap;gap:12px}.topbar nav{order:3;width:100%;margin:0;justify-content:space-between}.lang-button{margin-left:auto}.piece-switch{grid-template-columns:1fr;gap:7px}.piece-switch button{min-height:58px;padding:9px 15px}.piece-switch small{display:inline-block;width:130px}.piece-switch span{display:inline;font-size:19px}.room-head{align-items:start}.room-head h2{font-size:31px}.price b{font-size:23px}.price span{font-size:9px}.stage-tabs button{padding:12px 7px;text-align:center}.stage-tabs span{font-size:11px}.stage-panel,.scene-panel img,.film-frame,.detail-frame{height:440px;min-height:440px}.film-frame video{max-height:400px}.record-panel{padding:32px 20px}.record-mark{margin-bottom:24px}.record-panel dl{margin-top:24px}.record-panel dl div{font-size:11px}.stage-copy{padding:30px 21px}.stage-copy h3{font-size:31px}.after-room{padding-block:64px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Warm, tactile revision: keep the approved YiPhase blue as the anchor. */
:root{--paper:#faf3e8;--white:#fffdf8;--muted:#655f59;--line:#d8cbbc;--sand:#f4e5d4;--shadow:#604a3324}
body{background:radial-gradient(circle at 88% 5%,#f8e3d2 0,transparent 28%),linear-gradient(180deg,#fff8ed 0,#faf3e8 46%,#f5eadc 100%)}
.topbar{box-shadow:0 6px 20px #62482f0b}
.piece-switch{perspective:900px;gap:14px}
.piece-switch button{position:relative;isolation:isolate;background:linear-gradient(150deg,#fffefa 0%,#fff8ee 100%);border:1px solid #d5c3af;border-radius:4px;box-shadow:0 4px 0 #e5d7c6,0 13px 24px #62472b17,inset 0 1px #fff;transform:translateY(0);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,background .24s ease}
.piece-switch button::after{content:"";position:absolute;right:14px;top:14px;width:8px;height:8px;border:1px solid #c8a688;border-radius:50%;background:#fff8ee;box-shadow:0 1px 2px #73583b20}
.piece-switch button:hover,.piece-switch button:focus-visible{transform:translateY(-5px);box-shadow:0 7px 0 #e5d7c6,0 22px 28px #62472b26,inset 0 1px #fff}
.piece-switch button[aria-pressed=true]{background:linear-gradient(150deg,#fff8ee 0%,#f7e6d2 100%);border-color:var(--blue);box-shadow:0 5px 0 #c9c2b8,0 17px 27px #3c587024,inset 0 1px #fff}
.piece-switch button[aria-pressed=true]::after{background:var(--peach);border-color:#cd826c}
.piece-switch button[aria-pressed=true]:hover{transform:translateY(-3px)}
.room{border-color:#d5c3af;box-shadow:0 2px 0 #e5d7c6,0 26px 70px #604a3320}
.room-head{background:linear-gradient(115deg,#fffdf8 0%,#fff5e9 100%)}
.stage-tabs{background:#f4eadf;gap:1px;border-bottom-color:#d7c5b2}
.stage-tabs button{position:relative;background:linear-gradient(180deg,#fdf9f3,#f8eee3);border-right:0;border-bottom:3px solid transparent;transition:background .2s ease,box-shadow .2s ease,color .2s ease}
.stage-tabs button:hover,.stage-tabs button:focus-visible{background:#fffaf3;box-shadow:inset 0 3px #f4a38b66}
.stage-tabs button[aria-selected=true]{background:#fffdf8;border-bottom-color:var(--blue);box-shadow:inset 0 3px var(--peach),0 -3px 12px #73583b13;color:var(--ink)}
.stage-panels{background:#eadfce}
.record-panel{background:linear-gradient(135deg,#fffdf8,#f4e7d7)}
.look-list button{background:#fffaf3;box-shadow:0 2px 0 #eadbcc;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.look-list button:hover,.look-list button:focus-visible{transform:translateY(-2px);box-shadow:0 4px 0 #eadbcc,0 8px 12px #604a3318}
.look-list button[aria-pressed=true]{background:#f6e7d6}
.stage-actions button{transition:transform .2s ease,box-shadow .2s ease}
.stage-actions button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 5px 12px #604a3320}

/* An exact-object frame must never crop the agate. Its full outline stays in view. */
.stage-panel:has(.detail-frame){height:auto;min-height:650px}
.detail-frame{height:650px;min-height:650px;overflow:visible;padding:22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#e8d8c7,#f5ebdf)}
.detail-frame img{display:block;width:auto;height:auto;max-width:100%;max-height:606px;object-fit:contain;box-shadow:0 12px 30px #47382b2a}
.detail-mark{display:none}
@media(max-width:830px){.stage-panel:has(.detail-frame){height:auto;min-height:520px}.detail-frame{height:520px;min-height:520px}.detail-frame img{max-height:476px}}
@media(max-width:600px){.piece-switch{gap:10px}.piece-switch button{min-height:66px}.stage-panel:has(.detail-frame){height:auto;min-height:520px}.detail-frame{height:520px;min-height:520px;padding:16px}.detail-frame img{max-height:488px}}
@media(prefers-reduced-motion:reduce){.piece-switch button:hover,.piece-switch button:focus-visible,.piece-switch button[aria-pressed=true]:hover,.look-list button:hover,.look-list button:focus-visible,.stage-actions button:not(:disabled):hover{transform:none}}
.room-breadcrumb{max-width:1280px;margin:0 auto;padding:20px 18px 0;display:flex;gap:10px;align-items:center;color:#655f59;font-size:12px}
.room-breadcrumb a{text-underline-offset:3px}
.room-breadcrumb a:hover{text-decoration:underline;color:var(--blue)}
.room-breadcrumb [aria-current=page]{color:var(--ink);font-weight:600}
.room-breadcrumb+.introduction{padding-top:42px}
.interest-shortcut{display:inline-block;margin-top:15px;padding:9px 13px;border:1px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;font:600 12px/1.3 system-ui,sans-serif;letter-spacing:0;text-align:center;min-height:42px}
.interest-shortcut:hover{background:var(--blue);border-color:var(--blue)}
.interest-panel{max-width:1280px;margin:0 auto 86px;padding:clamp(25px,5vw,65px);display:grid;grid-template-columns:minmax(0,.86fr) minmax(320px,1fr);gap:clamp(25px,5vw,70px);background:#fffdf8;border:1px solid #d5c3af;box-shadow:0 14px 45px #604a3317;scroll-margin-top:24px}
.interest-intro h2{font:normal clamp(32px,4vw,52px)/1.14 Georgia,serif;margin:15px 0 18px}.interest-intro>p:not(.eyebrow){color:var(--muted);max-width:500px}.interest-intro>a{display:inline-block;margin-top:15px;text-underline-offset:4px;font-weight:600}
.interest-panel form{padding:26px;background:#f9f0e5;border:1px solid #e1cfbc;box-shadow:0 4px 0 #ebdccb}.interest-piece{display:flex;justify-content:space-between;gap:15px;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid #dbc8b4}.interest-piece span{color:var(--muted);font-size:13px}.interest-piece strong{font-size:14px;text-align:right}.interest-panel label{display:block;margin:14px 0;font-size:13px;font-weight:650}.interest-panel label>span{display:block;margin-bottom:6px}.interest-panel select,.interest-panel textarea,.interest-panel input{display:block;width:100%;padding:11px 12px;border:1px solid #baa994;border-radius:2px;background:#fffdf8;color:var(--ink);font:15px/1.5 system-ui,sans-serif}.interest-panel textarea{resize:vertical}.interest-privacy{font-size:12px;color:var(--muted);line-height:1.55}.interest-panel button[type=submit]{min-height:46px;padding:10px 20px;border:1px solid var(--ink);background:var(--ink);color:white;font-weight:650}.interest-panel button[type=submit]:hover{background:var(--blue);border-color:var(--blue)}.interest-panel button[type=submit]:disabled{opacity:.55}.interest-panel .form-status{min-height:1.5em;margin:10px 0 2px;font-size:13px;font-weight:600}.interest-panel form>a{font-size:12px;color:var(--muted)}
@media(max-width:830px){.interest-panel{margin-inline:18px;grid-template-columns:1fr}.interest-intro>a{margin-top:0}}
@media(max-width:600px){.interest-panel{padding:20px;margin-bottom:60px}.interest-panel form{padding:20px}.interest-piece{display:block}.interest-piece strong{display:block;text-align:left;margin-top:3px}}