/* 只修版面与信息层级；原站的颜色、机房绘制与四格动画保留。 */
:focus-visible{outline:2px solid var(--machine);outline-offset:3px}
#themer button{min-height:30px;padding:3px 9px;font-size:12px}

/* 首页：作者归标题区，四个页面入口归同一行。 */
body[data-page="index"] header h1{font-size:31px}
body[data-page="index"] header .tagline{max-width:870px;margin:4px auto 0;font-size:13px;line-height:1.4}
body[data-page="index"] header .tagline .src{font-size:11px}
body[data-page="index"] main{height:612px}
body[data-page="index"] #monitor{top:8px;height:595px}
body[data-page="index"] #intro{height:54px;padding:0 85px;font-size:16px;line-height:1.5;text-align:center;font-style:normal}
#author{position:absolute;top:14px;right:20px;width:260px;display:flex;align-items:center;gap:9px;text-align:left;color:var(--ink)}
#author img{width:42px;height:42px;object-fit:contain;flex:none}
#author p{font:13px/1.45 var(--serif)}
#author strong{font-weight:700}
#themebar{height:30px;flex:none;position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-end;padding:0 20px;background:var(--paper);border-top:1px solid var(--band-line)}
body[data-page="index"] #themer{position:static;display:flex;align-items:center;gap:6px;font-size:10px}
body[data-page="index"] #themer button{min-height:22px;padding:1px 7px;font-size:10px}
body[data-page="index"] footer{height:112px}
body[data-page="index"] footer .no{font-size:12px}
body[data-page="index"] footer .t{font-size:19px}
body[data-page="index"] footer .t.short{display:none}
body[data-page="index"] footer .d{font-size:13px;color:var(--label)}
body[data-page="index"] footer a{min-width:0;padding:0 20px}

/* 01/02/03/文章：沿用原机房面板，不整体重画。 */
body:not([data-page="index"]):not([data-page="four-writings"]) nav{height:62px}
body:not([data-page="index"]):not([data-page="four-writings"]) nav .brand{font-size:19px}
body:not([data-page="index"]):not([data-page="four-writings"]) nav .links a{font-size:14px}
body:not([data-page="index"]):not([data-page="four-writings"]) header{padding:23px 0 17px}
body:not([data-page="index"]):not([data-page="four-writings"]) header .plate{font-size:12px}
body:not([data-page="index"]):not([data-page="four-writings"]) header h1{font-size:31px}
body:not([data-page="index"]):not([data-page="four-writings"]) header h1 .sub{font-size:16px;color:var(--label)}
body:not([data-page="index"]):not([data-page="four-writings"]) footer{font-size:12px}
body:not([data-page="index"]):not([data-page="four-writings"]) .bus{font-size:13px}

/* 01：每屏九个位置，只有真实的五张卡有内容。 */
body[data-page="projects"] .ws-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-rows:auto}
body[data-page="projects"] .ws{padding:13px 18px 11px}
body[data-page="projects"] .ws-head{gap:13px}
body[data-page="projects"] .ws .logo{width:47px;height:47px}
body[data-page="projects"] .ws-title{font-size:21px;line-height:1.25}
body[data-page="projects"] .ws-title .en{font-size:11px;line-height:1.3}
body[data-page="projects"] .ws-desc{font-size:15px;line-height:1.48;color:var(--ink)}
body[data-page="projects"] .ws-foot{justify-content:flex-end}
body[data-page="projects"] .ws .go{font-size:15px;white-space:normal;text-align:right}
body[data-page="projects"] .ws.empty{background:transparent;pointer-events:none}

/* 02：两张真实便签，余下十四格只有格线。 */
body[data-page="notes"] .note{padding:17px}
body[data-page="notes"] .note .pin{font-size:12px}
body[data-page="notes"] .note-title{font-size:20px;line-height:1.3}
body[data-page="notes"] .note-desc{font-size:15px;line-height:1.5}
body[data-page="notes"] .empty-slot{border:1px solid var(--band-line);background:transparent;opacity:.42}
body[data-page="notes"] .empty-slot::before{content:none}

/* 03：一篇草稿和两个真实入口。 */
body[data-page="words"] .feature .tag{font-size:12px}
body[data-page="words"] .feature .t{font-size:26px}
body[data-page="words"] .feature .d{font-size:16px;line-height:1.5;color:var(--label)}
body[data-page="words"] .row{min-height:76px;align-items:center;font-size:18px;color:var(--ink)}
body[data-page="words"] .row .no,body[data-page="words"] .row .hint{font-size:13px}

/* 长文：仍是原来的信纸阅读，字号略放大。 */
body[data-page="article-design"] .letter{max-width:820px}
body[data-page="article-design"] .letter h1{font-size:36px}
body[data-page="article-design"] .letter h2{font-size:25px}
body[data-page="article-design"] .letter p{font-size:19px;line-height:1.85}
body[data-page="article-design"] .letter .byline{font-size:13px}

/* 名字故事：四格、内容、动画原封保留，仅加关系说明与可读字号。 */
body[data-page="four-writings"] nav{height:48px}
body[data-page="four-writings"] nav .brand{font-size:17px}
body[data-page="four-writings"] nav .links a{font-size:13px}
body[data-page="four-writings"] .theorem{padding-top:7px}
body[data-page="four-writings"] .theorem .q{font-size:14px}
body[data-page="four-writings"] .theorem .src{font-size:11px}
.story-path{font:12px var(--mono);letter-spacing:.08em;text-align:center;color:var(--machine);margin:5px 0 0}
body[data-page="four-writings"] h1.title{height:44px;font-size:32px}
.story-lead{flex:none;text-align:center;font:16px/1.45 var(--serif);color:var(--label);padding:0 20px 8px}
.ember.open .tip{opacity:1;transform:translateX(-50%) translateY(0)}
body[data-page="four-writings"] main{gap:11px 16px;padding:2px 32px 5px}
body[data-page="four-writings"] .tband{font-size:14px;line-height:1.42;white-space:normal;overflow:visible;text-overflow:clip}
body[data-page="four-writings"] .text .scroll p{font-size:14px;line-height:1.6}
body[data-page="four-writings"] .text .sum{font-size:14px;line-height:1.45}
body[data-page="four-writings"] .mhead .replay{font-size:17px;min-width:32px;min-height:20px}
body[data-page="four-writings"] footer.origin{height:37px;font-size:11px}

/* 手机和平板：改横排为竖排，让网页自然滚动。 */
@media(max-width:1100px){
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  body{display:block}
  #page{width:100%;height:auto;min-height:100vh;transform:none!important;display:flex;flex-direction:column;padding:0 20px}
  body:not([data-page="index"]):not([data-page="four-writings"]) nav{height:auto;min-height:58px;flex-wrap:wrap;gap:10px;padding:10px 0}
  body:not([data-page="index"]):not([data-page="four-writings"]) nav .links{order:3;width:100%;overflow-x:auto;gap:18px;padding:4px 0 7px}
  body:not([data-page="index"]):not([data-page="four-writings"]) nav .links a{font-size:14px;flex:none;white-space:nowrap}
  body:not([data-page="index"]):not([data-page="four-writings"]) #themer{margin-left:auto;flex-wrap:wrap}
  body:not([data-page="index"]):not([data-page="four-writings"]) header{padding:23px 0 16px}
  body:not([data-page="index"]):not([data-page="four-writings"]) header h1{font-size:29px;line-height:1.3}
  body:not([data-page="index"]):not([data-page="four-writings"]) header h1 .sub{display:block;margin:8px 0 0;font-size:16px;line-height:1.5}
  body:not([data-page="index"]):not([data-page="four-writings"]) .deck{flex:none;overflow:visible;min-height:0}
  body:not([data-page="index"]):not([data-page="four-writings"]) .bus{margin-top:0;line-height:1.5}
  body:not([data-page="index"]):not([data-page="four-writings"]) footer{height:auto;min-height:55px;gap:20px;flex-wrap:wrap;line-height:1.4}
  body[data-page="projects"] .ws-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(215px,auto)}
  body[data-page="projects"] .ws:nth-child(-n+3){border-top:1px solid var(--band-line)}
  body[data-page="projects"] .ws:nth-child(-n+2){border-top:none}
  body[data-page="projects"] .ws:nth-child(3n+2),body[data-page="projects"] .ws:nth-child(3n){border-left:none}
  body[data-page="projects"] .ws:nth-child(even){border-left:1px solid var(--band-line)}
  body[data-page="projects"] .ws.empty{display:none}
  body[data-page="notes"] .board{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(110px,auto);gap:10px;padding:12px}
  body[data-page="words"] .feature{margin:14px;padding:22px}
  body[data-page="article-design"] .deck.reading{overflow:visible}
  body[data-page="article-design"] .letter{max-width:100%;padding:30px 24px 55px}
  body[data-page="four-writings"] nav{height:auto;display:flex;flex-wrap:wrap;gap:12px;padding:12px 20px}
  body[data-page="four-writings"] nav .links{order:3;display:flex;width:100%;gap:16px;overflow-x:auto}
  body[data-page="four-writings"] nav .links a{font-size:14px;flex:none;white-space:nowrap}
  body[data-page="four-writings"] #themer{position:static;margin-left:auto;flex-wrap:wrap}
  body[data-page="four-writings"] .theorem{padding:14px 20px 0}
  body[data-page="four-writings"] h1.title{height:auto;padding:10px 0;font-size:33px}
  body[data-page="four-writings"] .story-lead{font-size:17px;padding:0 20px 15px}
  body[data-page="four-writings"] main{display:flex;flex-direction:column;gap:20px;padding:12px 20px 24px;flex:none;min-height:0}
  body[data-page="four-writings"] .mon{min-height:0;height:auto}
  body[data-page="four-writings"] .mscreen{min-height:0;flex:none}
  body[data-page="four-writings"] .tband{font-size:17px;line-height:1.5;padding:12px}
  body[data-page="four-writings"] .mbody{display:flex;flex-direction:column;flex:none}
  body[data-page="four-writings"] .stage{width:100%;height:280px;border-right:none;border-bottom:1px dashed var(--band-line)}
  body[data-page="four-writings"] .text{padding:15px 17px 18px}
  body[data-page="four-writings"] .text .scroll{overflow:visible;padding:0}
  body[data-page="four-writings"] .text .scroll p{font-size:17px;line-height:1.65}
  body[data-page="four-writings"] .text .sum{font-size:17px;line-height:1.6}
  body[data-page="four-writings"] .mhead{height:36px}
  body[data-page="four-writings"] .mhead .replay{min-width:44px;min-height:33px}
  body[data-page="four-writings"] footer.origin{height:auto;display:block;white-space:normal;padding:15px 20px;font-size:12px;line-height:1.65}
  body[data-page="index"] #page{padding:0}
  body[data-page="index"] header{height:auto;min-height:0;display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 16px 14px;text-align:center}
  body[data-page="index"] header h1{font-size:30px;line-height:1.2}
  body[data-page="index"] header .tagline{order:3;max-width:850px;margin:0;font-size:13px;line-height:1.5}
  body[data-page="index"] header .tagline .src{display:block;margin-top:4px;font-size:11px}
  body[data-page="index"] #author{order:2;position:static;align-self:flex-end;width:auto;max-width:320px;padding:0 5px;text-align:left}
  body[data-page="index"] #author img{width:48px;height:48px}
  body[data-page="index"] #author p{font-size:14px}
  body[data-page="index"] #themebar{height:auto;min-height:38px;justify-content:center;padding:5px 10px}
  body[data-page="index"] #themer{justify-content:center;flex-wrap:wrap;gap:5px;font-size:11px}
  body[data-page="index"] #themer button{min-height:28px;padding:3px 7px;font-size:11px}
  body[data-page="index"] main{height:auto;min-height:0;display:flex;flex-direction:column;overflow:visible;pointer-events:auto;padding:0}
  body[data-page="index"] #room{position:relative;left:auto;top:auto;width:100%;height:clamp(255px,45vw,460px);flex:none;touch-action:pan-y}
  body[data-page="index"] #room{z-index:1}
  body[data-page="index"] #monitor{position:relative;left:auto;top:auto;width:calc(100% - 32px);max-width:760px;height:360px;margin:14px auto 0;flex:none}
  body[data-page="index"] #screen{margin:9px;margin-bottom:0}
  body[data-page="index"] .ember .tip{max-width:min(280px,80vw);font-size:15px}
  body[data-page="index"] #lines{left:11px;right:11px}
  body[data-page="index"] .line{font-size:12px;line-height:19px;height:19px}
  body[data-page="index"] .line.true{font-size:17px;line-height:1.4}
  body[data-page="index"] #intro{height:auto;padding:20px 20px;font-size:17px;line-height:1.65}
  body[data-page="index"] footer{height:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  body[data-page="index"] footer a{min-width:0;min-height:105px;padding:12px 10px;border-right:1px solid var(--band-line);border-bottom:0}
  body[data-page="index"] footer a:last-child{border-right:0}
  body[data-page="index"] footer .t{font-size:18px}
  body[data-page="index"] footer .d{font-size:12px}
}
@media(max-width:900px){
  body[data-page="index"] footer a{align-items:center;text-align:center;gap:4px}
  body[data-page="index"] footer .kind{display:none}
  body[data-page="index"] footer .t.long,body[data-page="index"] footer .d{display:none}
  body[data-page="index"] footer .t.short{display:block;font-size:18px}
}
@media(max-width:700px){
  #page{padding:0 16px}
  #themer button{min-height:35px;font-size:11px}
  body[data-page="index"] #room{height:255px}
  body[data-page="index"] footer a{min-height:82px;padding:10px 3px}
  body[data-page="index"] footer .no{font-size:10px;letter-spacing:.02em}
  body[data-page="index"] footer .t.short{font-size:17px}
  body[data-page="projects"] .ws-grid{display:flex;flex-direction:column}
  body[data-page="projects"] .ws{min-height:205px;border-left:none!important;border-top:1px solid var(--band-line)!important;padding:18px}
  body[data-page="projects"] .ws:first-child{border-top:none!important}
  body[data-page="projects"] .ws-title{font-size:22px}
  body[data-page="projects"] .ws-desc{font-size:16px;line-height:1.6}
  body[data-page="projects"] .ws .go{font-size:16px}
  body[data-page="notes"] .board{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:8px;padding:12px}
  body[data-page="notes"] .note{grid-column:span 2;min-height:145px}
  body[data-page="notes"] .note-title{font-size:21px}
  body[data-page="notes"] .note-desc{font-size:16px}
  body[data-page="notes"] .empty-slot{min-height:52px}
  body[data-page="words"] .feature{margin:12px;padding:18px}
  body[data-page="words"] .feature .t{font-size:24px;line-height:1.3}
  body[data-page="words"] .feature .d{font-size:16px}
  body[data-page="words"] .row{padding:15px 18px;gap:9px;font-size:17px;flex-wrap:wrap}
  body[data-page="words"] .row .hint{font-size:13px}
  body[data-page="article-design"] .letter{padding:27px 18px 52px}
  body[data-page="article-design"] .letter h1{font-size:31px}
  body[data-page="article-design"] .letter h2{font-size:24px}
  body[data-page="article-design"] .letter p{font-size:17px;line-height:1.85;text-align:left}
  body[data-page="four-writings"] nav{padding:12px 16px}
  body[data-page="four-writings"] nav .brand{font-size:17px}
  body[data-page="four-writings"] nav .links{gap:13px}
  body[data-page="four-writings"] .theorem{padding:12px 16px 0}
  body[data-page="four-writings"] .theorem .q{font-size:13px;line-height:1.5}
  body[data-page="four-writings"] .theorem .src{font-size:11px}
  body[data-page="four-writings"] .story-lead{padding:0 16px 12px;font-size:17px}
  body[data-page="four-writings"] main{padding:12px 16px 22px}
  body[data-page="four-writings"] .stage{height:245px}
  body[data-page="four-writings"] #s4{cursor:crosshair;touch-action:pan-y}
}