body{margin:0;background:#ddd1b4;font-family:-apple-system,'PingFang SC','Hiragino Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#8c3a2e}a:hover{color:#6d2c22}

/* 舞台 + 手机框：手机上全屏窄条（原行为），平板/桌面变居中卡片 */
.stage{min-height:100dvh;display:flex;justify-content:center;align-items:stretch;background:radial-gradient(120% 90% at 50% 0%, #e7dcc0 0%, #d8cbab 100%)}
.frame{width:100%;max-width:480px;height:100dvh;position:relative;overflow:hidden;display:flex;flex-direction:column;background:#f6efdd;box-shadow:0 0 60px rgba(70,55,25,.35)}

@media (min-width:700px) and (min-height:640px){
  .stage{align-items:center;padding:32px 24px;box-sizing:border-box}
  .frame{max-width:480px;height:min(920px,calc(100dvh - 64px));border-radius:26px;
         box-shadow:0 30px 90px rgba(70,55,25,.38),0 4px 18px rgba(70,55,25,.22)}
  /* 两侧留白的淡墨书法水印（frame 后绘制会盖住重叠部分，窄屏时自然隐没）
     nowrap：竖排文字受 top:50% 半屏高度限制会折列，强制单列 */
  .stage::before,.stage::after{position:fixed;top:50%;transform:translateY(-50%);
         writing-mode:vertical-rl;white-space:nowrap;
         font-family:'Ma Shan Zheng','Noto Serif SC',serif;
         font-size:min(6.5vw,80px);letter-spacing:.3em;pointer-events:none;user-select:none}
  .stage::before{content:"人之初 性本善";left:5vw;color:#2b2620;opacity:.055}
  .stage::after{content:"三字經";right:5vw;color:#8c3a2e;opacity:.09}
}

/* 大屏整体放大：transform 从中心等比缩放（各内核行为一致；zoom 在
   旧 Chromium 里会破坏 flex 居中）。布局高度按缩放比折算，视觉不溢出 */
@media (min-width:760px) and (min-height:900px){
  .frame{height:min(920px,calc((100dvh - 64px)/1.15));transform:scale(1.15)}
}
@media (min-width:1000px) and (min-height:1000px){
  .frame{height:min(920px,calc((100dvh - 64px)/1.3));transform:scale(1.3)}
}