/* 布局与框架：body / .frame / .stamp / 视图切换 / 首屏 intro / 提问框 / 按钮。
   来源：原站第一个 <style> 块（index.html:20-84, 152-154, 155-161）。
   其中 .btn / .btn.secondary / .small 的「观感」会被 theme-guofeng.css 进一步覆盖，
   但结构（padding、布局、文字）保留于此。 */
html,body{min-height:100%}
body{
  font-family:'STKaiti','KaiTi','楷体','STSong','SimSun',serif;
  color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(168,51,42,.05), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(90,74,56,.07), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.015) .5px, transparent .5px);
  background-size:100% 100%,100% 100%,6px 6px;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow-x:hidden;
}
.frame{
  width:min(720px,100%);
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  border:1px solid var(--line);
  box-shadow:0 2px 0 rgba(0,0,0,.04),0 30px 60px -20px rgba(60,40,20,.35);
  padding:48px 44px 44px;
  position:relative;
}
.frame::after{
  content:"";position:absolute;inset:7px;border:1px solid rgba(168,51,42,.18);
  pointer-events:none;
}
.stamp{
  position:absolute;top:-14px;right:24px;
  width:54px;height:54px;background:var(--cinnabar);
  color:var(--paper);display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:bold;
  box-shadow:0 4px 10px rgba(138,42,34,.4);
  transform:rotate(-6deg);
  border:2px solid var(--cinnabar-d);
}
.stamp span{line-height:1}
.view{display:none}
.view.active{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#intro{text-align:center}
.title{font-size:64px;color:var(--ink);letter-spacing:18px;margin-left:18px;line-height:1}
.subtitle{color:var(--ink-2);font-size:15px;margin-top:14px;letter-spacing:6px;margin-left:6px}
.intro-text{color:var(--ink-2);font-size:16px;line-height:2;margin:34px auto 0;max-width:480px}
.ask-box{margin:30px auto 0;max-width:480px}
.ask-box label{display:block;color:var(--ink-3);font-size:14px;margin-bottom:10px;letter-spacing:2px}
.ask-box textarea{
  width:100%;min-height:64px;resize:vertical;
  background:rgba(255,250,238,.6);border:1px solid var(--line);
  color:var(--ink);font-family:inherit;font-size:16px;line-height:1.7;
  padding:12px 14px;outline:none;border-radius:0;
}
.ask-box textarea:focus{border-color:var(--cinnabar)}
.btn{
  margin-top:26px;background:var(--cinnabar);color:var(--paper);
  border:none;font-family:inherit;font-size:19px;letter-spacing:8px;
  padding:14px 44px 14px 52px;cursor:pointer;
  box-shadow:0 6px 16px rgba(138,42,34,.3);
  transition:transform .15s,box-shadow .15s,background .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(138,42,34,.38);background:var(--cinnabar-d)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
#casting{text-align:center}
.btn.secondary{background:transparent;color:var(--ink-2);border:1px solid var(--ink-3);box-shadow:none;font-size:16px;letter-spacing:6px;padding:11px 34px}
.btn.secondary:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.small{font-size:13px;color:var(--ink-3);letter-spacing:2px}
@media(max-width:560px){
  .frame{padding:36px 22px 30px}
  .title{font-size:48px;letter-spacing:14px;margin-left:14px}
  .result-grid{flex-direction:column;align-items:center;gap:18px}
  .coins{gap:18px}
  .coin{width:70px;height:70px}
}