:root{
    --paper:#f4e9d4;
    --ink:#24342f;
    --muted:#75634d;
    --cinnabar:#a6402e;
    --gold:#b4874d;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;overflow:hidden}
  body{
    background:
      radial-gradient(120% 90% at 50% 8%, #3a4a42 0%, #22302b 42%, #141f1c 100%);
    font-family:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
    -webkit-tap-highlight-color:transparent;
    display:grid;
    place-items:center;
    min-height:100svh;
    overscroll-behavior:none;
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(50% 40% at 18% 18%, rgba(213,163,103,.10), transparent 70%),
      radial-gradient(50% 40% at 82% 84%, rgba(120,145,128,.10), transparent 70%);
    filter:blur(20px);
  }
  .stage{
    position:relative;
    display:grid;
    place-items:center;
    width:100vw;
    height:100svh;
    padding:18px;
  }
  .card{
    position:relative;
    width:min(calc(100svh * 9 / 16 - 36px), 500px);
    aspect-ratio:9 / 16;
    border-radius:16px;
    overflow:hidden;
    background:var(--paper);
    box-shadow:
      0 40px 90px -30px rgba(0,0,0,.75),
      0 8px 30px rgba(0,0,0,.32),
      0 0 0 1px rgba(255,241,214,.12) inset;
    transform:translateZ(0);
    isolation:isolate;
  }
  .card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    box-shadow:
      0 0 0 1px rgba(94,69,39,.18) inset,
      0 0 60px rgba(65,44,22,.16) inset;
    z-index:5;
  }
  canvas{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    cursor:pointer;
    outline:none;
    touch-action:manipulation;
  }
  canvas:focus-visible{
    outline:2px solid rgba(255,238,204,.9);
    outline-offset:-6px;
  }
  .ui{
    position:absolute;
    inset:0;
    z-index:6;
    pointer-events:none;
    opacity:0;
    transition:opacity .7s ease;
  }
  .ui.show{opacity:1}
  .ui button{
    pointer-events:auto;
    position:absolute;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(97,73,43,.22);
    border-radius:50%;
    background:rgba(246,235,216,.55);
    color:#5b4a36;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 4px 14px rgba(46,34,18,.13);
    cursor:pointer;
    transition:transform .2s ease, opacity .3s ease, background .3s ease;
  }
  .ui button:hover{background:rgba(248,239,223,.8);transform:scale(1.04)}
  .ui button:active{transform:scale(.96)}
  .ui button svg{width:19px;height:19px;display:block}
  #soundBtn{top:calc(18px + env(safe-area-inset-top));right:calc(18px + env(safe-area-inset-right))}
  #replayBtn{bottom:calc(20px + env(safe-area-inset-bottom));right:calc(20px + env(safe-area-inset-right))}
  #soundBtn .off{display:none}
  #soundBtn.muted .on{display:none}
  #soundBtn.muted .off{display:block}

  .hint{
    position:absolute;
    left:50%;
    bottom:calc(102px + env(safe-area-inset-bottom));
    transform:translate(-50%, 6px);
    padding:0 14px;
    color:rgba(248,239,220,.82);
    font-size:13px;
    letter-spacing:.18em;
    white-space:nowrap;
    text-shadow:0 1px 8px rgba(8,20,16,.45);
    opacity:0;
    transition:opacity .55s ease, transform .55s ease;
    pointer-events:none;
  }
  .hint.on{opacity:.86;transform:translate(-50%,0)}
  .hint::after{
    content:"";
    display:block;
    width:3px;height:3px;
    margin:9px auto 0;
    border-radius:50%;
    background:rgba(248,239,220,.8);
    animation:hintPulse 1.9s ease-in-out infinite;
  }
  @keyframes hintPulse{
    0%,100%{opacity:.25;transform:scale(.65)}
    50%{opacity:.95;transform:scale(1)}
  }
  .dots{
    position:absolute;
    left:50%;
    bottom:calc(62px + env(safe-area-inset-bottom));
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:7px;
    opacity:0;
    transition:opacity .5s ease;
    pointer-events:none;
  }
  .dots.on{opacity:.65}
  .dots i{
    display:block;
    width:4px;height:4px;
    border-radius:50%;
    background:rgba(248,239,220,.55);
    transition:width .4s ease, background .4s ease;
  }
  .dots i.active{width:16px;border-radius:4px;background:rgba(248,239,220,.9)}

  .ui .shareBtn{
    left:50%;
    top:46%;
    width:auto;
    height:46px;
    padding:0 23px;
    border-radius:999px;
    border:1px solid rgba(246,235,216,.34);
    background:rgba(31,49,42,.72);
    color:#f4e9d4;
    font-family:inherit;
    font-size:14px;
    letter-spacing:.16em;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 8px 24px rgba(8,20,16,.28);
    opacity:0;
    transform:translate(-50%, 10px);
    pointer-events:none;
    transition:opacity .5s ease, transform .5s ease, background .2s ease;
  }
  .ui .shareBtn.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .ui .shareBtn:hover{background:rgba(42,64,55,.88);transform:translate(-50%,0) scale(1.02)}
  .ui .shareBtn:active{transform:translate(-50%,0) scale(.97)}
  .toast{
    position:absolute;
    left:50%;
    bottom:calc(186px + env(safe-area-inset-bottom));
    transform:translate(-50%, 8px);
    max-width:88%;
    padding:9px 15px;
    border-radius:999px;
    background:rgba(24,38,32,.92);
    color:#f4e9d4;
    font-size:13px;
    letter-spacing:.06em;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease, transform .35s ease;
    z-index:9;
  }
  .toast.on{opacity:1;transform:translate(-50%,0)}
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .record .stage{padding:0}
  .record .card{width:1080px;height:1920px;max-width:none;border-radius:0;box-shadow:none}
  .record canvas{width:1080px;height:1920px}
  .record .ui{display:none}
  @media (max-width: 760px), (max-aspect-ratio: 3/4){
    .stage{padding:0}
    .card{width:100vw;height:100svh;max-width:none;border-radius:0;aspect-ratio:auto}
    .ui button{width:44px;height:44px}
  }
  @media (max-height: 560px) and (orientation: landscape){
    .card{width:min(92vh * 9 / 16, 94vw);height:92vh;aspect-ratio:9/16}
  }
  @media (prefers-reduced-motion: reduce){
    .ui{transition:none}
  }