/* 造型回归 + 审计整改 · 2026-09-12。最后加载，只做覆盖，不改语义色。 */

/* 1.1 按钮切角：左上 + 右下各一刀，尺寸随控件走 */
:root{--cut:8px}
.button,.outline-button,.compact,input,.price,.step-panel{
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.button,.outline-button{--cut:10px}
.compact,input{--cut:8px}
.price{--cut:14px}
.step-panel{--cut:12px}
.price:before,.step-panel:before,.step-panel:after{clip-path:inherit}
/* 1.2 金边：沿切角轮廓走一圈。直边用 inset 阴影，两个斜角用角落渐变补上，
   这样 border 被 clip-path 斜切掉的缺口也有金线，输入框（无伪元素）同样适用。 */
:root{--gold:#b08d4e;--gw:1.5px}
.button,.outline-button,.compact,input,.price,.step-panel{
  box-shadow:inset 0 0 0 var(--gw) var(--gold);
  background-image:
    linear-gradient(135deg,var(--gold) 0 calc(50% + var(--gw)),#0000 0),
    linear-gradient(315deg,var(--gold) 0 calc(50% + var(--gw)),#0000 0);
  background-size:var(--cut) var(--cut);
  background-position:top left,bottom right;
  background-repeat:no-repeat}
.button:hover,.outline-button:hover,.compact:hover,.price:hover,.step-panel:hover,
.price:focus-within,input:focus{box-shadow:inset 0 0 0 var(--gw) var(--gold)}
/* 原有的内缩金色描边与新金边重复，去掉；focus-visible 的焦点环在下面单独保留 */
.button,.outline-button,.compact,input,.price,.step-panel,.hero-links .button{outline:none}
/* clip-path 会连 outline / box-shadow 一起裁掉，焦点环改成内缩描边，缺角处连贯 */
.button:focus-visible,.compact:focus-visible{outline:2px solid #fffcfa;outline-offset:-7px}
.outline-button:focus-visible,input:focus-visible{outline:2px solid var(--plum);outline-offset:-6px}
.price:focus-visible{outline:2px solid var(--plum);outline-offset:-9px}
.step-panel:focus-visible{outline:2px solid #fffcfa;outline-offset:-8px}

/* 1.3 手绘分隔线 */
.rule{display:block;width:min(320px,60%);height:14px;margin:10px 0 14px;opacity:.42}
.section-heading .rule{margin:9px 0 2px}

/* 1.4 备案 */
footer>div a{display:inline-flex;align-items:center;gap:6px}

/* 2.3 价格卡 CTA 常驻（.6 的透明度算下来对比度不到 3，直接给满） */
.price a{opacity:1}

/* 3.1 舞台按图比例定尺，图与宠物共用一套百分比坐标 */
.experience{width:min(100%,calc(100dvh * 1.7768));margin:0 auto;height:auto;min-height:0}
.stage{width:100%;height:auto;aspect-ratio:1672/941;max-height:none}

/* 3.2 旅伴暂停按钮只在场景段出现（其余段落对比度 2.78–3.30） */
.travel-pause{transition:opacity .35s}
.travel-pause.offstage{opacity:0;visibility:hidden}

/* 3.3 场景控件自带底：亮底 / 暗底两条规则，不再按场景打补丁 */
.scene-tabs{left:calc(5% - 18px);top:84px;padding:14px 18px}
.pet-picker{top:18px;right:calc(5% - 18px);padding:14px 18px}
.scene-tabs:before,.pet-picker:before{content:'';position:absolute;inset:-8px -14px;z-index:-1;
  background:radial-gradient(120% 140% at 20% 30%,#f4ede7f7,#f4ede7db 72%)}
.scene-tabs button,.pet-picker button{color:#3a2340;text-shadow:none}
.scene-tabs button[aria-selected=true],.pet-picker button[aria-pressed=true]{color:#6b294f}
.scene-tabs button:hover,.pet-picker button:hover{color:#6b294f}
.stage[data-scene=window] .scene-tabs:before,.stage[data-scene=window] .pet-picker:before,
.stage.moonlit .scene-tabs:before,.stage.moonlit .pet-picker:before{
  background:radial-gradient(120% 140% at 20% 30%,#211424f7,#211424db 72%)}
.stage[data-scene=window] .scene-tabs button,.stage[data-scene=window] .pet-picker button,
.stage.moonlit .scene-tabs button,.stage.moonlit .pet-picker button{color:#fff8f0;text-shadow:none}
.stage[data-scene=window] .scene-tabs button[aria-selected=true],.stage.moonlit .scene-tabs button[aria-selected=true],
.stage[data-scene=window] .pet-picker button[aria-pressed=true],.stage.moonlit .pet-picker button[aria-pressed=true]{color:#ffe6f2}

/* 3.4 动作按钮移到 Coco 身边，做成真正的切角金边按钮（竖屏仍走下方那套） */
@media(min-width:821px){
  .actions{position:absolute;left:calc(5% - 18px);top:calc(50% + 60px);transform:translateY(-50%);z-index:6;
    display:flex;flex-direction:column;align-items:stretch;gap:7px;width:112px;margin:0}
  .actions button{--cut:8px;width:100%;border:0;margin:0;cursor:pointer;
    padding:7px 10px;font-size:16px;line-height:1.25;letter-spacing:.04em;text-shadow:none;min-height:0;
    color:#3a2340;background-color:#f4ede7f2!important;
    clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
    box-shadow:inset 0 0 0 var(--gw) var(--gold);
    background-image:
      linear-gradient(135deg,var(--gold) 0 calc(50% + var(--gw)),#0000 0),
      linear-gradient(315deg,var(--gold) 0 calc(50% + var(--gw)),#0000 0)!important;
    background-size:var(--cut) var(--cut)!important;
    background-position:top left,bottom right!important;
    background-repeat:no-repeat!important;transition:background-color .2s,color .2s}
  .actions button:hover{background-color:#fff8f0!important;color:#6b294f;box-shadow:inset 0 0 0 var(--gw) var(--gold)}
  .actions button[aria-pressed=true]{background-color:#7d4663f2!important;color:#fff8f0;box-shadow:inset 0 0 0 var(--gw) var(--gold)}
  .actions button:focus-visible{outline:2px solid var(--plum);outline-offset:-6px}
  .actions button[aria-pressed=true]:focus-visible{outline-color:#fffcfa}
  .stage[data-scene=window] .actions button,.stage.moonlit .actions button{background-color:#211424f2!important;color:#fff8f0}
  .stage[data-scene=window] .actions button:hover,.stage.moonlit .actions button:hover{background-color:#33203a!important;color:#ffe6f2;box-shadow:inset 0 0 0 var(--gw) var(--gold)}
  .stage[data-scene=window] .actions button[aria-pressed=true],.stage.moonlit .actions button[aria-pressed=true]{background-color:#7d4663!important;color:#fff8f0;box-shadow:inset 0 0 0 var(--gw) var(--gold)}
}

/* 2.1 竖屏：场景收成顶部一条定比例的带子，控件退到图下方 */
@media(max-width:820px){
  .navigation{height:auto;flex-wrap:wrap;gap:12px 18px;padding:13px 5%}
  .nav-links{margin-left:0;order:3;width:100%;gap:18px;flex-wrap:wrap}
  .navigation>.compact{margin-left:auto}
  .hero{height:auto;min-height:0;padding:56px 0 70px}
  .hero-copy{position:static;width:86%;margin:0 auto}
  .hero h1{font-size:clamp(34px,9.4vw,60px)}
  .hero-copy p{font-size:17px}
  .hero-links{flex-wrap:wrap;gap:18px}
  .hero-seal,.vertical-note,.hero:after{display:none}
  .hero-bottom{position:static;flex-direction:column;gap:8px;margin-top:40px}

  .experience{width:100%;margin:0}
  .stage{--pic:calc(100vw / 1.7768);aspect-ratio:auto;height:auto;min-height:0}
  .scene-image{height:var(--pic)}
  .night-shade,#weather{bottom:auto;height:var(--pic)}
  .lamp-glow{top:calc(var(--pic) * .53);height:calc(var(--pic) * .37)}
  .pet-anchor{top:calc(var(--pic) * .662)}
  .stage[data-scene=window] .pet-anchor{top:calc(var(--pic) * .78)}
  .stage[data-scene=lake] .pet-anchor{top:calc(var(--pic) * .80)}
  .stage[data-scene=roof] .scene-object{top:calc(var(--pic) * .04);right:5%;width:92px}
  .stage[data-scene=window] .scene-object{top:calc(var(--pic) * .55)}
  .stage[data-scene=lake] .scene-object{top:calc(var(--pic) * .5)}
  .bronze-chime{width:62px;height:158px}
  .experience h2{font-size:25px}

  .scene-controls{display:block;position:static;width:auto;padding:18px 5% 26px;background:#f4ede7;color:var(--ink)}
  .scene-tabs,.pet-picker,.action-bar,.scene-tools{position:static;color:var(--ink);text-shadow:none;padding:0;margin:0;inset:auto}
  .scene-tabs:before,.pet-picker:before{display:none}
  .scene-tabs{display:flex;flex-wrap:wrap;gap:8px 22px;padding-bottom:12px;border-bottom:1px solid #cbbdc9}
  .scene-tabs button{font-size:20px;color:var(--ink)}
  .pet-picker{display:flex;gap:18px;margin-top:12px}
  .action-bar{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:14px}
  .pet-status{min-width:0}
  .actions{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0}
  .actions button,.scene-tools button,.reset{color:var(--ink);text-shadow:none}
  .actions button[aria-pressed=true],.scene-tools button[aria-pressed=true],.scene-tabs button[aria-selected=true],
  .actions button:hover,.scene-tools button:hover,.reset:hover{color:var(--plum)}
  .scene-tools{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:14px}
  .actions{margin-top:14px}

  .flow,.pricing,.download,.questions,.feedback{padding-left:6%;padding-right:6%}
  .flow .section-heading{flex-direction:column;align-items:flex-start;gap:14px}
  .flow-composition{height:auto;display:grid;gap:16px;margin:18px 0 26px}
  .pet-print,.flow-annotation,.composition-caption{position:static;transform:none}
  .mini-desktop{position:relative;right:auto;bottom:auto;transform:none}
  .pet-print{width:min(235px,64%);height:auto}
  .mini-desktop{width:100%;height:205px}
  .flow-annotation{font-size:18px}
  .steps{grid-template-columns:1fr}
  .step-panel{min-height:0;padding:26px 16px 22px}
  .pricing,.download,.questions,.feedback{grid-template-columns:1fr;gap:22px}
  .price{min-height:0}
  .price.featured{transform:none}
  .landing-desktop{transform:none;height:250px}
  .download-options{flex-wrap:wrap}
  .form-row{flex-wrap:wrap}
  .form-row input{flex:1 1 200px}
  footer{flex-wrap:wrap;gap:14px 20px;padding:26px 6% 40px}
  footer>div{margin-left:0;flex-wrap:wrap;gap:8px 18px}
  .travel-pause{bottom:22px;right:14px}
  .traveler{zoom:.62}
}