@font-face{font-family:CityBrush;src:url('./assets/mother-city-brush-v1/complete.woff2') format('woff2');font-display:swap}
@font-face{font-family:CityHand;src:url('./assets/mother-city-hand-v1/common.woff2') format('woff2');font-display:swap}
:root{font-family:system-ui,-apple-system,'PingFang SC',sans-serif;color:#2e483f;background:#e9e8de;font-synthesis:none;--ink:#2e483f;--muted:#737b70;--gold:#b78c4d;--line:#dddccf;--paper:#fbf9f1;--hand:CityHand,serif;--brush:CityBrush,CityHand,serif}
*{box-sizing:border-box}body{margin:0;padding:34px 38px 38px}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:#c7b78540}button{cursor:pointer;min-height:44px;border:0}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a87431;outline-offset:4px}a{color:var(--ink);text-underline-offset:4px}p{line-height:1.8}h1,h2,h3,p{margin:0}button{transition:background-color .18s ease,box-shadow .18s ease}.review-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1500px;margin:auto}.small-caps{font-size:10px;letter-spacing:.17em;color:#7f877c;font-weight:600}.review-heading h1{font-size:22px;font-weight:500;margin-top:9px;letter-spacing:.025em}.draft-badge{font-size:12px;background:#f6f4e9;border:1px solid #d5d6c6;border-radius:30px;padding:10px 14px;white-space:nowrap}.draft-badge i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#a1844d;margin-right:7px}.review-note{max-width:1500px;margin:14px auto 25px;font-size:12px;color:#747b70}.compare{max-width:1500px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 304px;gap:28px;align-items:start}.surface-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 12px}.surface-label h2{font-size:12px;font-weight:500;letter-spacing:.08em}.surface-label>span{color:#818779;font-size:10px}.phone-column .surface-label{display:block}.phone-column .surface-label>span{display:block;margin-top:5px}.desktop-surface{min-height:668px;background:var(--paper);border:1px solid #ffffffe0;border-radius:16px;box-shadow:0 12px 50px #38493908;overflow:hidden;position:relative;display:flex;flex-direction:column}.city-header{height:74px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #ddd9c940}.brand{font:17px var(--hand);display:flex;align-items:center;gap:8px}.brand-mark{font:28px var(--hand);color:#a58543}.brand small{font:11px system-ui;border-left:1px solid #d5d5c5;margin-left:6px;padding-left:12px;letter-spacing:.15em}.text-button{padding:7px 5px;background:none;color:#6e776b;font-size:12px}.text-button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}.primary{background:#405a49;color:#fffaf0;padding:12px 26px;border-radius:9px;font-family:var(--hand);font-size:17px;min-height:49px;box-shadow:0 3px 8px #2c4a3212}.primary:hover:enabled{background:#304837}.outline{border:1px solid #c5c9b9;color:#435943;border-radius:8px;padding:10px 17px;background:#f7f6ed;font-size:13px}.outline:hover:enabled{background:#efefdf}.surface-foot{margin-top:auto;display:flex;justify-content:space-between;gap:16px;border-top:1px solid #dfdfd359;padding:14px 30px;font-size:10px;color:#8b8c7b}.surface-foot span:last-child{font-family:var(--hand);font-size:12px}#desktop-content{flex:1;min-height:535px;position:relative}.scene{padding:35px 40px 30px}.eyebrow{font:12px var(--hand);color:#859078;letter-spacing:.16em}.display-title{font-family:var(--brush);font-weight:400;letter-spacing:.02em;font-size:38px;line-height:1.45;margin-top:13px;color:#344d3c}.intro-copy{margin-top:16px;max-width:480px;color:#77816f;font-size:13px;line-height:1.9}.welcome-scene{display:grid;grid-template-columns:1.15fr 1fr;gap:15px;align-items:center;min-height:470px;padding:35px 40px 22px}.welcome-scene .primary{margin-top:27px}.material-hint{margin-top:13px;font-size:11px;line-height:1.7;color:#969982}.entry-art{width:100%;max-width:310px;margin:auto;position:relative;isolation:isolate}.entry-art:before{content:'';position:absolute;inset:6% -12% 6%;background:radial-gradient(ellipse,#ecdcb23d,transparent 68%);z-index:-1}.entry-art svg{width:100%;height:auto;display:block}.art-caption{font:12px var(--hand);color:#8b907b;text-align:center;margin-top:0;letter-spacing:.12em}.ritual-route{display:flex;gap:24px;flex-wrap:wrap;padding:0 40px 23px;font:12px var(--hand);color:#8d947f}.ritual-route span:not(:last-child):after{content:'—';padding-left:24px;color:#c9c8b9}.progress-path{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:22px;font-size:10px;color:#9c9f8e}.progress-path span{display:flex;align-items:center;gap:7px}.progress-path span:not(:last-child):after{content:'／';color:#c5c7b9}.progress-path .active{color:#456344}.scene-title{font:30px/1.5 var(--brush);font-weight:400}.scene-description{font-size:12px;color:#848a79;margin:8px 0 20px}.three-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.work-card{background:#f4f3e8;border:1px solid #e6e5d8;border-radius:4px 13px 13px 4px;padding:20px 17px 17px;min-width:0;position:relative;box-shadow:inset 3px 0 #dfdcc4}.work-card:nth-child(2){background:#eef1e7;box-shadow:inset 3px 0 #cbd5be}.work-card:nth-child(3){background:#f2eee4;box-shadow:inset 3px 0 #dbcdb4}.card-index{font-family:Georgia,serif;font-style:italic;font-size:22px;color:#b5a882}.work-card h3{font:20px/1.5 var(--hand);margin:17px 0 10px}.excerpt{font-size:11px;line-height:1.85;color:#747c6d;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:61px}.work-card .text-button{font-size:11px;margin-top:5px}.category-label{font-size:10px;color:#868d7c;display:block;margin-top:12px}.category-label select{width:100%;display:block;border:1px solid #d7d9c8;background:#ffffff63;color:#466046;border-radius:6px;margin-top:7px;padding:9px 6px;min-height:44px;font-size:11px}.scene-bottom{margin-top:23px;display:flex;align-items:center;justify-content:space-between;gap:14px}.scene-bottom p{font-size:11px;color:#919784}.validation{font-size:12px;color:#a16b3c;margin:14px 0}.confirmation-scene{max-width:680px;margin:auto}.confirm-list{list-style:none;padding:0;margin:24px 0}.confirm-list li{padding:12px 0;border-bottom:1px solid #dedfce;display:flex;justify-content:space-between;align-items:center;gap:15px}.confirm-list strong{font:17px var(--hand);font-weight:400}.confirm-list small{font-size:10px;color:#94947e}.owner-consent{font-size:12px;line-height:1.8;color:#66775d;display:flex;align-items:flex-start;gap:10px;cursor:pointer}.owner-consent input{accent-color:#526b4e;width:18px;height:18px;margin:1px 0;flex:none}.state-scene{text-align:center;padding:26px 38px 25px}.state-scene .entry-art{max-width:178px}.state-scene .scene-title{margin-top:9px}.state-scene .scene-description{margin:10px auto 18px;max-width:510px}.state-pill{display:inline-block;background:#eef0e3;border:1px solid #dce1cc;border-radius:20px;padding:6px 12px;font-size:10px;color:#70835d}.state-pill.pending{color:#a17b49;background:#f5efdf;border-color:#e9dfc6}.process-lines{max-width:430px;margin:17px auto;text-align:left;border-block:1px solid #e3e2d5;padding:12px 0}.process-lines div{display:flex;align-items:center;gap:10px;padding:7px 6px;color:#77856d;font-size:12px}.process-lines i{width:20px;height:20px;border-radius:50%;border:1px solid #c7ceba;font:12px/18px system-ui;text-align:center;font-style:normal}.process-lines .done i{background:#e4ebd9;color:#657e4f}.process-lines .current i{border-color:#ba9a62;color:#b08a49}.process-lines .current{color:#8e794e}.waiting-note{font-size:11px;color:#948972;line-height:1.8}.received-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:560px;margin:20px auto}.received-card{min-width:0;position:relative;padding:15px 9px;border:1px solid #dce1cf;background:#eff2e7;border-radius:7px}.received-card span{font:18px var(--hand);display:block}.received-card small{font-size:10px;color:#8a9579;display:block;margin-top:8px}.received-card:before{content:'✓';font:11px system-ui;position:absolute;right:9px;top:7px;color:#9aaa7d}.state-scene .primary{margin-top:8px}.light-scene{background:radial-gradient(ellipse at 50% 23%,#f4e6b05e,transparent 63%)}.light-scene .entry-art{max-width:207px}.light-scene .scene-title{font-size:33px}.afterglow{font:15px var(--hand);color:#809171;margin:12px 0 0}.origin-state{display:grid;place-items:center;align-content:center;min-height:490px;text-align:center;padding:30px}.origin-state .scene-title{font-size:29px}.origin-state p{font-size:12px;color:#8a927d;margin:14px 0 24px}.quiet{font-size:11px;color:#909581;line-height:1.9;margin-top:17px}.phone-frame{border:7px solid #f9f8f1;border-radius:39px;background:var(--paper);height:608px;box-shadow:0 12px 35px #38493912,0 0 0 1px #d2d3c5;position:relative;overflow:hidden;display:flex;flex-direction:column}.phone-status{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:10px;color:#515c49;position:relative;flex:none}.phone-island{position:absolute;left:calc(50% - 37px);top:6px;width:74px;height:21px;border-radius:20px;background:#2e392e}.phone-header{display:flex;align-items:center;justify-content:space-between;padding:1px 15px 6px;gap:9px;font:14px var(--hand);flex:none}.phone-header button{min-width:32px;font-size:17px}.tiny-label{font:9px system-ui;color:#939c85;background:#eeefe3;padding:3px 5px;border-radius:4px}.phone-home-line{position:absolute;bottom:8px;left:calc(50% - 42px);width:84px;height:3px;background:#9da58d;border-radius:6px}.phone-disclaimer{text-align:center;color:#929785;font-size:10px;line-height:1.6;margin-top:16px}#phone-content{padding:9px 20px 25px;text-align:center;flex:1;overflow-y:auto;min-height:0}.phone-art{max-width:175px;margin:2px auto 10px}.phone-art .entry-art{max-width:100%}.phone-art .entry-art svg{max-height:185px}.phone-title{font:27px/1.45 var(--brush);margin:12px auto 7px}.phone-copy{font-size:11px;color:#8b947e;line-height:1.9}.phone-cards{display:grid;gap:8px;margin:20px 0}.phone-card{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;padding:12px;border:1px solid #e0e4d3;background:#f0f2e6;border-radius:8px;font:15px var(--hand)}.phone-card small{font:9px system-ui;color:#8f9b7c}.phone-card.pending{background:transparent;border-style:dashed;color:#a0a790}.phone-meta{font-size:9px;color:#a0a590;line-height:1.7;margin-top:14px}.phone-origin{min-height:400px;display:grid;align-content:center;gap:17px}.phone-origin p{font-size:11px;color:#8f967f}.review-console{max-width:1500px;margin:26px auto 0;padding:23px 25px;border:1px solid #d4d8c6;border-radius:12px;display:grid;grid-template-columns:230px 1fr;gap:15px 25px;background:#f1f2e8}.console-intro h2{font:18px var(--hand);margin-top:7px}.console-intro p{font-size:10px;color:#8c9481;line-height:1.8;margin-top:7px}.console-actions{align-self:center;min-width:0}.console-row,#receipt-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}#receipt-controls{margin-bottom:10px}#receipt-controls:empty{display:none}#console-status{font-size:11px;color:#93967d;margin-top:8px;min-height:20px}.console-actions .text-button{font-size:11px}.contract-note{grid-column:1/-1;border-top:1px solid #dde0d0;padding-top:13px;font-size:11px;color:#829077}.contract-note summary{cursor:pointer;width:max-content;min-height:26px;line-height:26px}.contract-note p{max-width:850px;margin:8px 0;font-size:11px}.device-switch{display:none}dialog{color:var(--ink);border:1px solid #e3e3d2;border-radius:16px;padding:33px 34px 25px;background:var(--paper);max-width:min(670px,calc(100vw - 32px));max-height:calc(100svh - 40px);overflow:auto;box-shadow:0 25px 100px #253b3429}dialog::backdrop{background:#34463861;backdrop-filter:blur(5px)}dialog h2{font:29px/1.4 var(--brush);font-weight:400;margin:15px 22px 11px 0}dialog>p{font-size:12px;color:#839076}.dialog-close{position:absolute;top:12px;right:12px;background:none;color:#8a947d;font:25px system-ui;min-width:44px}.sample-choice{display:flex;align-items:center;gap:12px;background:#f1f2e5;border:1px solid #dee1cf;border-radius:9px;padding:17px 15px;margin-top:11px;cursor:pointer}.sample-choice input{width:18px;height:18px;accent-color:#526a49;flex:none}.sample-choice span{font:16px var(--hand)}.sample-choice small{display:block;font:10px system-ui;margin-top:7px;color:#929b84}.dialog-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:22px}#sample-list{margin-top:23px}#preview-body{font-family:var(--hand);font-size:18px;line-height:2;max-width:510px}#light-confirm{text-align:center;padding:30px 38px}.small-sun{font-size:50px;line-height:1;color:#c39b4f;margin:10px}.lit-rays{opacity:.8}.lit-glow{animation:glow-breath 6s ease-in-out infinite}@keyframes glow-breath{50%{opacity:.5}}
@media(min-width:1650px){.desktop-surface{min-height:720px}.welcome-scene{min-height:510px}.display-title{font-size:43px}.scene{padding-top:43px}.three-cards{gap:22px}.work-card{padding:23px}.phone-frame{height:645px}}
@media(max-width:1200px){body{padding:25px 24px}.compare{grid-template-columns:minmax(0,1fr) 280px;gap:22px}.welcome-scene{padding:30px;grid-template-columns:1.2fr 1fr}.display-title{font-size:32px}.scene{padding:30px 25px}.three-cards{gap:9px}.work-card{padding:17px 13px}.work-card h3{font-size:17px}.surface-foot{padding-inline:23px}.surface-foot span:last-child{display:none}.city-header{padding-inline:22px}.brand{font-size:15px}.phone-frame{height:608px}.phone-column .surface-label>span{font-size:9px}.surface-label>span{font-size:9px}.ritual-route{padding-inline:30px;gap:13px}.ritual-route span:not(:last-child):after{padding-left:13px}}
@media(max-width:900px){body{padding:22px 18px}.review-heading{align-items:flex-start}.review-heading h1{font-size:19px}.draft-badge{font-size:10px;white-space:normal;max-width:140px;line-height:1.5}.compare{grid-template-columns:1fr}.device-switch{display:flex;gap:6px;padding:5px;background:#dedfd2;border-radius:10px;width:max-content;margin:0 0 22px}.device-switch button{padding:9px 23px;min-height:40px;border-radius:7px;background:none;font-size:12px;color:#7c866e}.device-switch [aria-pressed=true]{background:#faf9ee;color:#3f573e;box-shadow:0 2px 5px #3e4c3510}.compare[data-device=desktop] .phone-column,.compare[data-device=phone] .desktop-column{display:none}.phone-column{width:320px;max-width:100%;margin:auto}.phone-frame{height:632px}.review-console{grid-template-columns:1fr}.console-intro p br{display:none}.contract-note{grid-column:auto}.desktop-surface{min-height:650px}.welcome-scene{min-height:470px}.display-title{font-size:36px}.review-note{font-size:11px;margin-bottom:20px}.surface-label>span{font-size:10px}}
@media(max-width:520px){body{padding:19px 15px 24px}.review-heading{display:block}.review-heading h1{font-size:18px;line-height:1.6}.draft-badge{display:inline-block;max-width:none;margin-top:13px;padding:6px 10px}.small-caps{font-size:8px}.review-note{line-height:1.8;margin-top:10px}.surface-label{display:block}.surface-label>span{display:block;margin-top:6px}.desktop-surface{border-radius:12px;min-height:650px}.city-header{height:65px;padding-inline:17px}.brand{font-size:14px;gap:5px}.brand-mark{font-size:22px}.brand small{display:none}.city-header .text-button{font-size:10px}.welcome-scene{display:flex;flex-direction:column-reverse;text-align:center;gap:0;padding:24px 22px 26px;min-height:0}.welcome-scene>.entry-art{max-width:190px}.display-title{font-size:29px;line-height:1.45;margin-top:12px}.intro-copy{font-size:12px;line-height:1.85}.welcome-scene .primary{margin-top:21px;width:100%;font-size:16px}.material-hint{font-size:10px}.art-caption{font-size:11px}.ritual-route{justify-content:center;gap:11px;padding:0 13px 25px;font-size:11px}.ritual-route span:not(:last-child):after{padding-left:11px}.scene{padding:24px 19px}.scene-title{font-size:26px}.scene-description{font-size:11px}.progress-path{font-size:9px;gap:3px;margin-bottom:18px}.progress-path span{gap:3px}.three-cards{grid-template-columns:1fr;gap:13px}.work-card{padding:18px 19px}.work-card h3{margin:8px 0;font-size:21px}.card-index{font-size:20px}.excerpt{font-size:12px;min-height:0;-webkit-line-clamp:2}.category-label{font-size:11px}.category-label select{font-size:12px}.scene-bottom{align-items:stretch;flex-direction:column}.scene-bottom .primary{width:100%;font-size:16px}.scene-bottom p{font-size:10px}.confirm-list li{display:block}.confirm-list small{display:block;margin-top:6px}.owner-consent{font-size:11px}.state-scene{padding:28px 20px}.state-scene .entry-art{max-width:160px}.received-cards{gap:6px}.received-card{padding:21px 4px 12px}.received-card span{font-size:16px}.received-card small{font-size:8px}.light-scene .scene-title{font-size:28px}.surface-foot{padding-inline:19px}.review-console{padding:19px 18px;margin-top:23px}.outline{font-size:12px;padding:9px 11px}.console-actions button{min-height:44px}.phone-column{width:320px}.phone-frame{height:620px}.phone-header{padding-inline:12px}.phone-title{font-size:25px}.dialog-bottom{flex-direction:column;gap:7px}.dialog-bottom .primary{font-size:16px}dialog{padding:27px 22px 23px}dialog h2{font-size:25px}.sample-choice{padding:14px 10px;gap:9px}.sample-choice span{font-size:14px}.sample-choice small{font-size:9px}#light-confirm{padding:29px 21px}#light-confirm h2{margin-right:0}#preview-body{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Leave room for all three cards inside the phone once a version arrives. */
body:is([data-phone=pending],[data-phone=received],[data-phone=lit]) .phone-art{max-width:120px;margin:0 auto 6px}
body:is([data-phone=pending],[data-phone=received],[data-phone=lit]) .phone-title{font-size:24px}
body:is([data-phone=pending],[data-phone=received],[data-phone=lit]) .phone-cards{margin:16px 0;gap:7px}
body:is([data-phone=pending],[data-phone=received],[data-phone=lit]) .phone-card{padding:10px 11px;font-size:14px}
#guard-controls{margin:14px 0}#guard-controls[hidden],#new-version[hidden]{display:none}
.desktop-column,.phone-column{min-width:0}
@media(max-width:900px){.compare{grid-template-columns:minmax(0,1fr)}.phone-column{width:min(320px,100%)}}