/* 一枚の宙の様式。2026-07-31 に templates/canvas.html の <style> から出した。
   出した理由：canvas.html は Cache-Control:no-cache（同梱した立ち上がりの値が
   利用者ごとに違うため）で、面を開くたび 197KB を丸ごと取り直していた。様式と
   ふるまいは誰にとっても同じものなので、内容ハッシュ付きのURLで**永久にキャッシュ
   させる**側へ移す。編集はこのファイルを直に。URLのハッシュはサーバが中身から
   作り直すので、増やす番号は無い。 */
  html,body{margin:0;height:100%;overflow:hidden}
  /* この面は 400 しか配っていない（canvas.html の sky_weights）。_sky_tokens の
     b,strong{600} をそのままにすると、無い太さをブラウザが**合成**して太らせる
     ——明朝の合成太字は字が潰れる。太さで言わないのがこの面の作法なので
     （.gather-lead b／.rsheet-lead b が既にそうしている）、ここで一度だけ戻す。
     以後この面に <b> を足す人は、色か字間で言うこと。 */
  b,strong{font-weight:400}
  /* ── 頭の帯（2026-08-02 差し替え）──────────────────────────────
     左に名、中央に探す、右に「書く」としるし。左右を flex:1 で同じ幅にしてあるので、
     探すの器は画面のちょうど中央に立つ（中の語の長さが変わっても動かない）。 */
  header{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;
         align-items:center;gap:var(--s2);
         padding:calc(12px + var(--safe-t)) calc(16px + var(--safe-r)) 10px calc(20px + var(--safe-l));
         pointer-events:none}
  /* 帯そのものは指を受けないが、中の押せるものは受ける。
     ── 2026-08-07 Kosei「携帯でジャンルがスクロールできない」──────────────
     .menu-list を足した。戸の板は語（a/button）だけが指を受けていたので、行と行の
     すきま・板の余白に触れた指は板をすり抜けて #vp（touch-action:none の宙）に
     着いていた——携帯でジャンルの一覧を送ろうとすると、送られるのは宙のほうで、
     一覧はぴくりとも動かない。**巻き取る面そのもの**が指を受けていなければ、
     ブラウザはそこを送る面だと見なせない。 */
  header a,header button,header input,header .seek,header .menu-list{pointer-events:auto}
  /* 頭の帯も、足元の帯と同じように闇を敷く（2026-08-02）。紙片の面では背が白い紙に
     なるので、白い字も白いしるしも、そのままでは消える。下辺の .dock と同じ作法——
     上から下へ薄れる霞を一枚。指は受けない（宙は掴んで動かす面なので塞がない）。 */
  header::before{content:'';position:absolute;inset:0 0 -20px;z-index:-1;pointer-events:none;
         background:linear-gradient(180deg,var(--space) 0%,rgba(8,8,13,.90) 48%,rgba(8,8,13,0) 100%)}
  /* 宙の上に常駐する字には、島の名と同じ闇の暈をつける（2026-07-31 夜）。
     紙片の面では背が白い紙になるので、白い墨がそのままだと消える。 */
  .brand{flex:1 1 0;min-width:0;margin:0;white-space:nowrap;overflow:hidden;
        color:var(--ink-1);font-size:var(--t-title);letter-spacing:var(--tr-title);
        text-shadow:0 0 10px rgba(8,8,13,.92),0 0 24px rgba(8,8,13,.72)}
  .brand small{color:var(--thread);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
              margin-left:10px}
  /* 名を押せば全景へ（2026-08-06）。器は作らない——押せるのは字そのもの。
     p の側に寸法を残したままなのは、名の右の余白まで押せる面にしないため
     （そこは宙を掴んで動かす面で、頭の帯は指を受けないと決めてある）。 */
  .brand-home{display:inline-flex;align-items:center;
        min-height:var(--touch);padding:0;margin:0;background:none;border:none;
        font:inherit;color:inherit;letter-spacing:inherit;text-shadow:inherit;
        cursor:pointer;transition:opacity .22s var(--ease)}
  .brand-home:hover{opacity:.82}
  .brand-home:active{opacity:.62}
  .top-mid{flex:0 1 460px;min-width:0;display:flex;justify-content:center}
  .top-right{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:var(--s1)}
  /* しるし＝戸。三つの粒はロゴそのもの（tayori.png）。ただし黒地のPNGをそのまま貼ると
     白い紙片の上で黒い四角になる——形を型（mask）として使い、塗りは字の色にする。
     こうすればどんな地の上でも消えず、hover も active も字の色に連れて動く。 */
  .logo-mark{display:inline-flex;align-items:center;gap:3px;
        width:auto;height:var(--touch);padding:0 7px 0 8px;
        background:none;border:none;border-radius:22px;color:var(--ink-1);
        filter:drop-shadow(0 0 8px rgba(8,8,13,.92));
        transition:background .2s var(--ease),opacity .2s var(--ease)}
  .logo-glyph{width:32px;height:26px;display:block;background:currentColor;
        -webkit-mask:url(/static/img/logo-mark.png) center/contain no-repeat;
                mask:url(/static/img/logo-mark.png) center/contain no-repeat}
  /* ── 戸の向き（2026-08-07 Kosei「押せることが分からない」）─────────────
     しるしは絵であって、押せるものの形をしていない。右に小さな山を添えて、
     **閉じている時は下・開いている時は上**を向かせる（＝板がこれからどちらへ
     動くかを指す）。回すのは 180° ちょうどで、途中に跳ねを持たせる：戸は
     押した瞬間に開くもので、じわりと回るものではない（Apple §1・封蝋の物理）。
     字の色は一段落として、しるしより前に出ないようにする。 */
  .logo-caret{flex:none;width:12px;height:12px;color:var(--ink-4);
        transition:transform .34s cubic-bezier(.34,1.42,.5,1),color .2s var(--ease)}
  .logo-mark:hover{background:rgba(250,248,243,.08)}
  .logo-mark:hover .logo-caret{color:var(--ink-2)}
  .logo-mark:active{opacity:.62}
  .logo-mark[aria-expanded="true"]{background:rgba(250,248,243,.10)}
  .logo-mark[aria-expanded="true"] .logo-caret{transform:rotate(180deg);color:var(--ink-1)}
  /* 動きを控える設定では、回さずに色だけで言う（向きは静止画でも読める） */
  @media (prefers-reduced-motion:reduce){
    .logo-caret{transition:color .2s var(--ease)}
  }
  /* ── 戸の中身（Kosei の画の作法：暗い板・行は左に語、右に符）──────────
     v3.10 で汎用の板を物質へ置き換えた線を、ここだけは越える。戸は宙の中の物では
     なく「宙の外へ出る道」の一覧で、白い紙片の上に重なる面でもある——霞では読めない。 */
  .menu{position:relative}
  .menu-list{position:absolute;right:0;top:calc(100% + 8px);z-index:2;
             width:min(86vw,300px);display:flex;flex-direction:column;gap:1px;
             padding:8px;border-radius:16px;
             background:rgba(16,16,22,.97);border:1px solid rgba(179,143,111,.18);
             box-shadow:0 26px 60px -26px rgba(0,0,0,.92);
             max-height:min(78dvh,600px);overflow-y:auto;overscroll-behavior:contain;
             scrollbar-width:thin;scrollbar-color:var(--rule-faint) transparent;
             /* 開く時は、しるしの下から降りてくる（起点は右上＝戸の蝶番の側）。
                hidden を外すと display が none から戻るので、その一度だけ走る。 */
             transform-origin:top right;animation:menu-in .26s var(--ease)}
  @keyframes menu-in{from{opacity:0;transform:translateY(-8px) scale(.97)}
                       to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){ .menu-list{animation:none} }
  .menu-list[hidden]{display:none}
  .menu-form{margin:0}
  .menu-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
            width:100%;min-height:var(--touch);padding:11px 12px;
            background:none;border:none;border-radius:10px;text-align:left;
            color:var(--ink-2);text-decoration:none;
            font-family:var(--font-ui);font-size:13px;letter-spacing:.1em;
            transition:background .18s var(--ease),color .18s var(--ease)}
  .menu-row:hover{background:rgba(250,248,243,.07);color:var(--ink-1)}
  .menu-row:active{background:rgba(250,248,243,.12)}
  .menu-row .mi{flex:none;width:17px;height:17px;color:var(--ink-4)}
  .menu-row:hover .mi{color:var(--thread)}
  .menu-sep{height:1px;margin:6px 10px;background:var(--rule-faint)}
  .menu-head{margin:0;padding:8px 12px 4px;font-size:10px;letter-spacing:.28em;color:var(--ink-4)}
  /* 戸の中のジャンル＝島への道。読んでいる最中（紙を敷いた島に居る間）でも、
     ここからなら別の島へ降りられる——それがこの一覧の在る理由（2026-08-02）。 */
  .menu-rooms{display:grid;grid-template-columns:1fr 1fr;gap:1px;
              max-height:216px;overflow-y:auto;overscroll-behavior:contain;
              -webkit-overflow-scrolling:touch;touch-action:pan-y;
              scrollbar-width:thin;scrollbar-color:var(--rule-faint) transparent}
  .menu-rooms button{background:none;border:none;font-family:var(--font-ui);cursor:pointer;
              display:flex;align-items:center;min-height:40px;padding:10px 12px;
              border-radius:9px;font-size:12.5px;letter-spacing:.12em;color:var(--ink-3);
              transition:background .18s var(--ease),color .18s var(--ease)}
  .menu-rooms button:hover{background:rgba(250,248,243,.07);color:var(--ink-1)}
  .menu-rooms button:active{background:rgba(250,248,243,.12)}
  .menu-rooms button[aria-current="true"]{color:var(--ink-1);background:rgba(250,248,243,.09)}
  .menu-rooms button[aria-current="true"]::before{content:'';flex:none;width:5px;height:5px;
              margin-right:8px;border-radius:50%;background:var(--thread)}
  /* ── 足元に、ひとつの帯（案A・UI改善仕様書 v1.0 §3.3）──────────────────
     下辺に高さ84px（＋端末の縁）の帯を一つ置き、四隅に散っていた常駐物をここへ集める。
     背は下へ向かって濃くなる霞——宙の字が帯の裏で読めていると、どこまでが操作で
     どこからが宙なのか分からない。上辺は罫一本だけで、面も箱も作らない。
     帯そのものは指を受けない（pointer-events:none）：宙は掴んで動かす面なので、
     84pxぶんの帯が指の通り道を塞いではいけない。受けるのは、中の語だけ。 */
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:11;
        height:calc(84px + var(--safe-b));
        padding:0 calc(20px + var(--safe-r)) calc(10px + var(--safe-b)) calc(20px + var(--safe-l));
        display:flex;flex-direction:column;justify-content:center;gap:6px;
        background:linear-gradient(180deg,transparent,rgba(8,8,13,.92) 34%,var(--space) 62%);
        border-top:1px solid var(--rule-faint);
        pointer-events:none}
  .dock-row{position:relative;display:flex;align-items:center;justify-content:space-between}
  .dock-row>*{pointer-events:auto}
  /* この面の名。説明は置かない（宙の作法）。帯の下段中央へ（案A） */
  .foot{margin:0;text-align:center;color:var(--ink-4);font-size:var(--t-mono);
        letter-spacing:var(--tr-mono);pointer-events:none}
  /* ── 宙そのもの ── */
  /* 宙は「掴んで動かす面」なので、字は掴めない（2026-07-31 夜）。
     指を置いて動かすたび、ブラウザは字を選ぼうとして青く塗る——ひきずりは
     宙を動かす手つきなので、選択が起きること自体が誤り。長押しの拡大鏡と
     コピーの吹き出し（iOS）も同じ理由で止める。
     書く柱・読む柱・入力はこの外なので、そちらの選択とコピーは今までどおり。 */
  #vp,.hold,header,.foot,.zoom{
        -webkit-user-select:none;user-select:none;
        -webkit-touch-callout:none}
  #vp{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;
      -webkit-tap-highlight-color:transparent}
  #vp.drag{cursor:grabbing}
  #world{position:absolute;left:50%;top:50%;width:0;height:0;
         transform-origin:0 0;will-change:transform}
  /* 島：部屋の名と、その地形。名は倍率に抗って読める大きさを保つ。
     逆スケールは **JSが名の要素へ直に書く**（2026-07-31 夜）。かつては world に
     カスタムプロパティ（--ik）を一本書いて継承で配っていたが、継承する変数を根に
     書き換えると、その下の全要素（数百のことば）の計算済みスタイルが一斉に無効に
     なる——つまみ／ホイールのたび、宙ぜんぶの字を再計算していた。名は14枚しかない。
     14枚の葉に直接書くほうが、根に一度書くより圧倒的に軽い。 */
  /* 島は、外の版面と縁を切る（2026-08-03 カクツキ）。島の中では字が一枚ずつ
     書き直され（打鍵の再生）、紙になったり散らばりに戻ったりする。contain が無いと、
     その一枚の変化が「宙ぜんぶの版面をもう一度組み直してよいか」の判定に混ざる。
     `.isl` は既に position:absolute ＋ transform ＝ 包含ブロックでも重なりの文脈でも
     あるので、layout/style を足しても位置も重なり順も変わらない（0寸のままでいる）。 */
  .isl{position:absolute;transform:translate(-50%,-50%);contain:layout style}
  /* 名の字は旧宙の部屋一覧の姿（2026-08-05・19px／.16em／安静時 .82 に戻した）。
     ふれれば 1 へ——濃さにも階調がある（旧 .room.on の .82→hover 1）。 */
  .isl-nm{position:absolute;left:0;top:0;transform:translate(-50%,-50%);
          color:var(--ink-2);opacity:.82;font-size:19px;letter-spacing:.16em;
          white-space:nowrap;
          text-shadow:0 0 9px rgba(8,8,13,.9);pointer-events:none;
          transition:opacity .8s var(--ease),color .3s var(--ease)}
  /* かつてここに body.flying の transform 1.1s 遷移があった（K を先に書いて world
     だけ滑らせる旧滑走の連れ）。滑走が rAF（glide）になり、名の寸法は毎フレーム
     JS が書く——transform に遷移を残すと、その一フレームずつが遅れて泥になる。 */
  /* 島の名は、その島への戸（2026-07-31・夜に倍率の縛りを外した）。
     はじめは遠景（body.far）だけの戸だったが、紙を敷いてからは、まわりに残るのが
     「名と灯」だけになった——見えているのが名しかないのに押せない、では戸に見えない。
     **紙を敷いていない島の名は、いつでも戸**。降りている島（.sheet）の名だけは
     指を受けない：そこは読む面で、主役は紙。名が紙のタップを横取りしてはいけない。
     的は44px（v14の作法）＝19pxの字に上下14px・左右16pxの余白を負のマージンで足す。 */
  .isl:not(.sheet) .isl-nm{pointer-events:auto;cursor:pointer;
                           padding:14px 16px;margin:-14px -16px}
  .isl:not(.sheet) .isl-nm:hover{color:var(--chalk);opacity:1}
  /* 押した瞬間に応える（離すのを待たない・Apple §1）。飛ぶのは1.1秒かけてでも、
     「受け取った」は指が触れたその場で言う。 */
  .isl:not(.sheet) .isl-nm:active{color:var(--chalk);opacity:.72}
  /* 名の下に罫を一本（2026-08-05・旧宙の部屋一覧の姿）。カードやピルにはしない
     ——物質のメタファーは罫一本まで。読む面（.sheet）の名は素のまま。 */
  .isl:not(.sheet) .isl-nm::after{content:'';display:block;height:1px;margin-top:9px;
                                  background:var(--rule);opacity:.5}
  /* 部屋の灯（2026-08-05・旧宙の部屋一覧の「炎」へ戻した）。名のまわりに、
     その部屋にいまあることばの封の色が最大3粒。芯は白に寄せ、外へ向かって色に
     なって消える（単色の玉だと染みに見える）。ぼかし（filter）は使わない——
     一枚ごとにGPUの層が立つ（7/31の教訓）。やわらかさは放射の裾で言う。
     名の中に居るので、逆スケールも名と同じ一枚の transform に乗る。 */
  .fire{position:absolute;z-index:-1;width:36px;height:36px;
        left:var(--fx);top:var(--fy);transform:translate(-50%,-50%);
        background:radial-gradient(circle at 50% 50%,
                   color-mix(in srgb,var(--c) 62%,#fffdf6) 0%,
                   var(--c) 26%,
                   color-mix(in srgb,var(--c) 45%,transparent) 52%,
                   transparent 74%);
        opacity:.6;pointer-events:none;
        transition:opacity 2.2s var(--ease)}
  /* 近づいたら名と灯は退き、ことばが主役になる。
     炎は名（.isl-nm）の**中**に居るので、退いた名の .34 が親として掛かる——
     .22 を直に書くと実効 .34×.22≈.075 でほぼ消える（旧 glow は名の兄弟で .25 が
     素通しだった）。だからここは割り戻して .65＝実効 ≈.22。
     気配（.lit）の炎も近景では同じ薄さへ（旧作法どおり・呼吸も止める）。
     .isl.lit .fire の .95 は詳細度 (0,3,0) でこの行 (0,2,1) に勝つので、
     lit 側は body.near を重ねた一行 (0,4,1) で明示的に上書きする。 */
  body.near .isl-nm{opacity:.34}
  body.near .fire{opacity:.65}
  body.near .isl.lit .fire{opacity:.65;animation:none}
  /* 紙片の面（読む面）に灯は要らない（2026-07-31 夜）——読む面の背は、ただの闇。 */
  .isl.sheet .fire{display:none}
  /* 読む面には、名も灯も出さない（2026-08-06・Kosei判断）。
     同日にまわりの島の**字**を畳んだら、紙束の上に残ったのは名と灯だけになった。
     降りた島の名は足元の一行と重複し、まわりの島の名と灯は紙の上に乗る
     ——`.isl-nm` は `.isl-w` の**後ろ**に足されるので、必ず紙より上に来る
     （実測：人生の島に降りて、自分の名＋まわり4つが紙束の上に .34 で乗っていた）。
     居場所は足元の名と「宙へもどる」が言い、他の島へはロゴの戸（ジャンル）から
     降りられる＝道は塞がない。
     visibility も畳む（v4の作法「閉じた面は visibility も畳む」）：見えない名が
     戸として指を受けない・Tab が虚空の戸を巡らない。遅らせるのは入りだけ
     （.8s＝薄まり終わってから畳む）。出る向きは即座に見えて .8s で濃くなる。
     選び方を `.isl` まで伸ばしてあるのは詳細度のため——素の body.reading .isl-nm
     は (0,2,1) で、上の `.isl:not(.sheet) .isl-nm{pointer-events:auto}` (0,3,0) に
     負ける。(0,3,1) まで上げて、指を受けないことまで確かに言う。 */
  body.reading .isl .isl-nm{opacity:0;pointer-events:none;visibility:hidden;
     transition:opacity .8s var(--ease),visibility 0s linear .8s}
  /* ── 一枚の画面に、一つの読み方（2026-07-31 夜・利用者FB）────────────
     「途中でフォーマットが変わる」「暗い字が黒に沈む」「重さが片側に寄る」の三つは、
     どれも同じ一因だった——**読む面（紙片）と地形（散らばりの字）が同居していた**。
     紙になるのは降りた島だけなので、まわりの島は黒地に生の字を撒いたままで、
     同じ画面に二つの様式が並び、暗い色相の字が闇に沈み、密度が片側へ寄っていた。
     直し方は「まわりを整える」ではなく、**降りたら、まわりは地形に還る**こと。
       ・紙を敷いた島 … 読む面（紙片・不透明）
       ・それ以外の島 … 地形。字は読み物ではなく粒（.3）
       ・読んでいる間  … まわりの字は退き、名と灯だけが残る（一つの様式だけが残る）
     倍率（far/near）で分けないのが要点：しきい値は画面幅で破綻するし、
     「読む面かどうか」は倍率ではなく紙が敷かれたかどうかで決まっている。 */
  /* 退き方は**一枚ごとの薄さ**で言う（2026-08-03 カクツキ）。以前は束ねている箱
     （.isl-w）に opacity を掛けていたが、透ける箱は「中身を一度どこかへ描いて、
     それから薄めて重ねる」＝島ごとに描画の面を一枚よけいに立てることを意味する。
     島は20あり、読む面に入る・出るたびに、その20枚が0.8秒かけて一斉に薄まっていた。
     字は押し出し（relax）で重なっていないので、箱で薄めても一枚ずつ薄めても見え方は
     同じ——なら、面を立てないほうを採る。--dim は継承する変数だが、書くのはCSSの
     規則（.sheet / body.reading が変わった時だけ）で、毎フレームJSが書く類ではない。 */
  /* 字が出るのは、降りた島の中だけ（2026-08-06・Kosei判断）。
     ここは三度書き直した場所なので、経緯を残す：
       2026-08-05 「引いた宙では字を出さない」＝body.far（K<0.32）にだけ掛けた。
       2026-08-06 その線が倍率で引かれていたのが誤り。島から出る線は倍率ではなく
                  「島が視界の大半を占めるか」（seekWatch の R·K > 0.20·min(VW,VH)）
                  なので、「どの島にも居ないのに、まだ far ではない」帯（K≒0.34〜0.7）
                  が空いていた——島と島のあいだへ漕ぎ出すと、全島ぶんの字（実測784枚）
                  が一度に描かれ、名と灯の面が字の壁に沈む。条件を body:not(.reading)
                  ＝居場所へ言い直した。
       2026-08-06 さらに、島に降りている間の「まわりの島は .14 で退く」も消す。
                  .14 を入れた理由（2026-08-02）は「0 にすると紙の束の縁からひと漕ぎで
                  何も無い闇に出る＝宙がひとつづきに見えない」だったが、陸を示すのは
                  字ではなく**名と灯**（.isl-n / .fire＝別の層で、ここでは畳まれない）。
                  読めない字を数百枚敷いておく理由はもう無い。
     消し方は --dim（薄さ0）＝畳む面を立てない作法のまま（薄まり方も .w 自身の .8s）。
     指も受けない：見えない字が、名の戸のタップを横取りしない。
     visibility も畳む（v4の作法「閉じた面は visibility も畳む」）——薄さ0の字は
     tabindex=0/role=button のまま約780個残り、Tab とスクリーンリーダーが虚空の
     ボタン群を巡ってしまう。遅らせるのは入りだけ（.8s＝薄まり終わってから畳む）。
     出る向きは遷移を持たない側の規則が効くので、即座に見えて .8s で濃くなる。
     探すの寄せ（.gw）は別の層なので、遠景でも今までどおり集まる。 */
  .isl:not(.sheet) .isl-w{--dim:0;pointer-events:none;
     visibility:hidden;transition:visibility 0s linear .8s}
  .isl.sheet .isl-w{--dim:1}
  /* ── 重さの修正（2026-07-31）──────────────────────────
     引いた宙（K<0.7）では、色の発光（text-shadow）も塗らない。遠景の字は
     小さく沈んでいて（.isl-w が 0.3）光暈はどのみち読めない——見えない光の
     ために、引く・つまむのたび宙ぜんぶの影を塗り直すのはやめる。
     inline style（散らばり用の色）より勝つ必要があるので !important。
     filter:none は保険（にじみが遠景に持ち越されないように）。 */
  body.crisp .w{filter:none!important;text-shadow:none!important}
  /* .isl-w の opacity 遷移は畳んだ（--dim へ移した＝薄まるのは .w 自身の .8s） */
  /* ことば：枠のないタイポグラフィの塊。濃さ＝沈降（--a はJSが書く） */
  /* width/height:max-content は必須。包含ブロック（.isl）は0寸なので、絶対配置の
     ことばは shrink-to-fit で min-content＝**1字ずつ**へ潰れる——縦書きが「右から
     読む一行」に化け、横書きが偶然それらしい縦組みに見えていた（初版で実際に起きた）。
     寸法の基準を自分で持てば、max-height/max-width が折返しの行長として正しく効く。 */
  /* 沈降のぼかし（filter:blur）は 2026-07-31 に全廃した。filter は一枚ごとに
     GPUの描画層を作る——数百枚では携帯のGPUメモリを食い潰し、ソフトウェア描画へ
     落ちて「動かない」になる（重さの真因その2）。沈降は薄さ（--a）が既に言っている。
     にじみ（.nijimi＝打鍵の間・一枚だけ・一時）だけは例外として残す。 */
  /* 遷移させるのは opacity と transform だけ（2026-07-31 夜）。
     色・紙の地・影を .8s かけて渡すと、島に降りる／出るたびに数百枚ぶんの
     「塗り」が48フレーム続く——GPUに載る opacity/transform と違い、色と影の
     遷移は毎フレーム CPU が塗り直す。紙になる瞬間は一度で塗り、動きだけを流す。
     （押した瞬間に色が変わるのは v14 の作法どおり＝手の応答は遅らせない） */
  .w{position:absolute;color:var(--ink-1);font-size:15px;line-height:2;
     letter-spacing:.12em;white-space:pre-wrap;overflow-wrap:anywhere;
     writing-mode:vertical-rl;width:max-content;height:max-content;
     max-height:330px;max-width:22em;
     padding:10px;margin:-10px;cursor:pointer;
     opacity:calc(var(--a,.8) * var(--dim,1));
     transition:opacity .8s var(--ease),transform 1.1s var(--ease)}
  .w.h{writing-mode:horizontal-tb}
  /* 受け止め：その一枚だけ鮮明に。まわりは息をひそめる */
  .w.held{opacity:1!important;z-index:5;color:var(--chalk)}
  .isl.hush .w:not(.held):not(.pull){opacity:calc(var(--a,.8)*var(--dim,1)*.3)!important}
  .w.pull{opacity:1!important;z-index:4}
  /* 波紋：受け止めた場所から一度だけひらく（糸の色の輪） */
  /* 寸法（width/height）でひらくと、1.6秒のあいだ毎フレーム版面の計算が走る
     ——受け止めは宙で最も多い動作なので、ここは transform だけで開く（2026-07-31 夜）。
     箱の寸法は最初から340px、見えているのは scale だけ＝GPUの上で完結する。 */
  .ripple{position:absolute;width:340px;height:340px;
          border:1px solid rgba(179,143,111,.5);border-radius:50%;
          pointer-events:none;transform:translate(-50%,-50%) scale(.035);
          will-change:transform,opacity;
          animation:rippleGo 1.6s var(--ease) forwards}
  @keyframes rippleGo{
    from{transform:translate(-50%,-50%) scale(.035);opacity:.9}
    to{transform:translate(-50%,-50%) scale(1);opacity:0}}
  /* 寄りの操作（キーボードと、つまめない環境のための一対）。
     2026-07-31：語（よる／ひく）をやめ、どの地図でも通じる ＋／− に。 */
  .zoom{display:flex;gap:10px}
  .zoom button{background:none;border:none;
        color:var(--ink-3);font-family:var(--font-ui);font-size:19px;line-height:1;
        width:var(--touch);min-height:var(--touch);padding:0;
        transition:color .22s var(--ease);
        touch-action:none}   /* 押し続けの寄り引き（pointerdown 連打）を巻き取らせない */
  .zoom button:hover{color:var(--ink-1)}
  .zoom button:active{opacity:.62}
  /* 引き返す語（2026-08-03 操作性）。島に降りている間（body.reading）だけ立つ。
     語で押す作法のまま、罫一本を下に敷く——器は作らない（宙の中の道具ではなく出口）。 */
  .sky-home{background:none;border:none;font-family:var(--font-ui);
        color:var(--ink-3);font-size:12.5px;letter-spacing:.2em;
        min-height:var(--touch);padding:0 2px 0 6px;
        border-bottom:1px solid transparent;
        opacity:0;pointer-events:none;visibility:hidden;
        /* 畳んだ面は visibility も畳む（v4作法）。残すと消えた語に焦点の輪だけが立つ */
        transition:opacity .6s var(--ease),color .22s var(--ease),visibility 0s .6s}
  body.reading .sky-home{opacity:1;pointer-events:auto;visibility:visible;
        transition:opacity .6s var(--ease),color .22s var(--ease)}
  .sky-home:hover{color:var(--ink-1);border-bottom-color:var(--rule-faint)}
  .sky-home:active{opacity:.62}
  /* 並べて読む（§3.2）。出口（宙へもどる）と同じ現れ方・同じ姿で、隣に一語だけ。
     入口と出口を同じ形にするのは、どちらも「この島に降りている間だけの行い」だから。 */
  .sky-read{padding:0 6px 0 2px}
  /* ── 言葉の漂流物：島の岸（§4.4）。人のことばと同じ姿では置かない——
        色を持たず、紙に染みた淡墨。書かれもしない（打鍵の再生から除外） ── */
  .w.pd{color:var(--ink-3);text-shadow:0 0 16px rgba(179,143,111,.20)}
  .w.pd.held{color:var(--ink-1)}
  /* ── 紙片（2026-07-31 グリッド）────────────────────────────
     島に降りると、ことばは闇に光る字から**紙片**になり、右から左へ整列する
     （縦書きの読み順）。遠景は今までの散らばりのまま——位置の意味（色相の方位・
     沈降の深さ）は遠景のもので、降りた島は「読む面」。紙の色は、選ばれた色なら
     その手染め（淡く染みる）、無彩なら生成り〜灰白の三種（--pp はJSが書く）。
     字は墨。沈んだことばは紙の上でも墨が薄い（--a を炊き直す＝時は紙でも見える）。
     色・影に !important が要るのは、散らばり用の色が style 属性で入っているため。 */
  .isl.sheet .w{background:var(--pp,#EBE7DE);
     color:rgba(30,27,33,calc(.52 + .44*var(--a,.8)))!important;
     text-shadow:none!important;filter:none!important;opacity:1;
     /* 寸法スナップ（2026-08-03「ひとつづきの宙」／2026-08-07 に 4列＝80字まで広げた）。
        値はJSが --sw/--sh に書く。横書き（.h）は書かないので自然寸のまま。
        clip は残す（丸めの一字が縁からはみ出さないため）が、切れる紙はもう作らない。
        max-height を解くのは必須：散らばりの姿の 330px（行長の縛り）が、伸ばした
        紙の丈（最大388px）を黙って切り戻す——列が一本はみ出す形で現れた。 */
     width:var(--sw,max-content);height:var(--sh,max-content);
     max-height:none;max-width:none;overflow:hidden;
     padding:24px 20px;margin:0;border-radius:var(--edge);
     /* 影は一本だけ・ぼけは浅く（2026-07-31 夜）。影のぼけは blur と同じ計算で、
        一枚ごとに面積ぶんの塗りが要る。紙が浮いて見えるのに30pxは要らない。 */
     box-shadow:0 8px 14px -12px rgba(0,0,0,.95)}
  /* 2026-08-07：溢れた紙に掛けていた左フェード（.ovf）は廃止。紙のほうを 4列＝80字
     まで広げたので、途中で切れる紙そのものが無い（canvas.js の sizeOf を見よ）。 */
  .isl.sheet .w.pd{color:rgba(30,27,33,.6)!important}
  .isl.sheet .w.held{color:rgba(30,27,33,.96)!important;
     box-shadow:0 0 0 1px var(--rule-act),0 18px 34px -18px rgba(0,0,0,.95)}
  /* 焦点レンズ（2026-08-03「ひとつづきの宙」1d）。開いた一枚だけ寸法の規律を解いて
     全文へ。フェードも解く。寸法は遷移させない（開閉は一度で塗る＝v14の作法）。
     まわりの息のひそめ方は既存の hush がそのまま効く。held より後に置く＝影はこちらが勝つ */
  .isl.sheet .w.focus{width:max-content;height:max-content;
     max-width:26em;max-height:min(78dvh,560px);
     padding:28px 24px;z-index:6;
     box-shadow:0 0 0 1px var(--rule-act),0 26px 60px -20px rgba(0,0,0,.95)}
  .isl.sheet .w .tcaret{background:rgba(30,27,33,.6)}
  /* ── 打鍵の実時間再生（mood.html と同じ筆先・同じにじみ） ── */
  .tcaret{display:inline-block;width:2px;height:1em;background:var(--thread);
          vertical-align:-0.12em;animation:tcBlink .9s steps(1) infinite}
  @keyframes tcBlink{50%{opacity:0}}
  .w.nijimi{filter:blur(.7px)!important}
  /* ── 受け止めたことばに添う行い（mood.html の .hold と同じ作法：箱は作らず罫と霞だけ）── */
  .hold{position:fixed;z-index:25;display:flex;flex-direction:column;gap:2px;
        padding:var(--s2) var(--s3);opacity:0;scale:.97;pointer-events:none;
        transition:opacity .26s var(--ease),scale .3s var(--ease)}
  .hold.on{opacity:1;scale:1;pointer-events:auto}
  /* 霞（2026-07-31 夜に作り直し）。この黒い楕円は残す——闇がそこだけ濃くなって
     行いが立ち上がる、この見え方が宙の作法。作り直したのは**大きさと縁**で、
     旧実装は霞の箱（inset -10/-14）が中身とほぼ同寸だったので、放射グラデが
     四角い縁で断ち切られていた。宙が黒いうちは見えなかったが、紙片の面ができて
     白い紙の上に来た途端、切り口が「灰色の帯」として紙に乗った（受け止めた紙の
     下端をよぎるにじみの正体）。
     霞を中身より一回り大きく取り、縁（100%）でちょうど0になる楕円にすれば、
     どこにも切り口は出ない。中心は濃いまま＝白い紙の上でも字は読める。 */
  .hold::before{content:'';position:absolute;inset:-34px -46px;z-index:-1;pointer-events:none;
        background:radial-gradient(50% 50% at 50% 50%,
                   rgba(8,8,13,.97) 0%,rgba(8,8,13,.95) 46%,
                   rgba(8,8,13,.80) 70%,rgba(8,8,13,0) 100%)}
  .hold-src{margin:0;font-size:10.5px;line-height:1.9;letter-spacing:0.14em;color:var(--ink-4);
            word-break:keep-all;overflow-wrap:anywhere;padding:2px 0 4px}
  /* 収蔵数（2026-08-07 §3.1）。行いではなく、そのことばについての事実なので、
     押せる罫（--rule-act）も触れる高さ（--touch）も与えない——読むだけの一行。
     出典の刻印と同じ段（--ink-4・数字と控えの下限）に置き、数字だけを一段上げる。
     2026-08-07 夜に書体を一本へ戻したので、この行を本文と分けているのは字の形では
     なく、寸法（10.5px）と色（--ink-4）だけ。 */
  .hold-kept{margin:0;padding:2px 0 4px;font-family:var(--font-ui);
             font-size:10.5px;line-height:1.9;letter-spacing:0.14em;color:var(--ink-4);
             word-break:keep-all;overflow-wrap:anywhere}
  .hold-kept .n{color:var(--ink-3);font-variant-numeric:tabular-nums;
                letter-spacing:0.06em;padding-right:.1em}
  .hold-act{display:inline-flex;align-items:center;gap:10px;min-height:var(--touch);
            background:none;border:none;padding:11px 2px;font-family:var(--font-ui);
            font-size:var(--t-meta);letter-spacing:0.16em;color:var(--ink-2);
            white-space:nowrap;transition:color .22s var(--ease),opacity .22s var(--ease)}
  .hold-act:hover{color:var(--ink-1)}
  .hold-act:active{opacity:.62}
  .hold-act.on{color:var(--ink-1)}
  .hold-act.sub{color:var(--ink-3);letter-spacing:0.1em;padding-left:2px}
  .hold-act.sub.on{color:var(--ink-2)}
  .hold-note{margin:0;padding:4px 2px 0;max-width:17em;font-size:11.5px;line-height:2;
             letter-spacing:0.1em;color:var(--ink-3);
             word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
  .hold-note a{color:var(--thread);text-decoration:underline;text-underline-offset:3px;
               display:inline-block;min-height:36px;padding:9px 2px 0}
  .ic{position:relative;width:16px;height:16px;flex:0 0 16px}
  .ic-shelf .b{position:absolute;left:1px;right:1px;bottom:3px;height:1px;background:var(--rule-act)}
  .ic-shelf .p{position:absolute;left:4.5px;bottom:7.5px;width:7px;height:8px;
               border:1px solid var(--thread);background:transparent;
               transition:bottom .38s var(--ease),background .38s var(--ease)}
  .hold-act.on .ic-shelf .p{bottom:4px;background:var(--thread)}
  /* ── 探す（2026-08-02・頭の帯へ）──────────────────────────────
     畳んだ一語→押して開く、をやめて、はじめから入力の器を置く。押せることの合図が
     罫一本だけ、という宙の作法をここでは降ろした（Kosei の画）——探すは宙の物ではなく、
     宙を見るための道具で、いつでも同じ場所に在ることのほうが要る。 */
  .seek{display:flex;align-items:center;gap:var(--s1);width:100%;max-width:460px;
        height:42px;padding:0 var(--s2) 0 14px;border-radius:21px;
        background:rgba(250,248,243,.10);border:1px solid transparent;
        transition:background .22s var(--ease),border-color .22s var(--ease)}
  .seek:hover{background:rgba(250,248,243,.14)}
  .seek:focus-within{background:rgba(250,248,243,.15);border-color:var(--rule-faint)}
  .seek-ic{flex:none;display:block;width:16px;height:16px;color:var(--ink-3)}
  .seek-ic svg{width:100%;height:100%;display:block}
  .seek input{flex:1;min-width:0;height:100%;background:none;border:none;outline:none;
              font-family:var(--font-ui);font-size:13px;letter-spacing:0.12em;
              color:var(--ink-1);padding:0}
  .seek input::placeholder{color:var(--ink-3);letter-spacing:0.18em}
  .seek button#seekBack{flex:none;background:none;border:none;border-radius:50%;
               width:26px;height:26px;line-height:1;font-size:15px;
               color:var(--ink-3);transition:background .18s var(--ease),color .18s var(--ease)}
  .seek button#seekBack:hover{background:rgba(250,248,243,.12);color:var(--ink-1)}
  .seek button#seekBack:active{opacity:.62}
  .seek.seeking{border-color:var(--rule-act)}
  /* 探しているあいだ（2026-08-02）。選別が入って待ちが1秒ほど生まれたので、
     黙って固まらないよう、虫眼鏡だけが息をする。線は動かさない＝騒がない。 */
  .seek.waiting{border-color:var(--rule-act)}
  .seek.waiting .seek-ic{animation:seek-breath 1.6s var(--ease) infinite}
  @keyframes seek-breath{0%,100%{opacity:.42}50%{opacity:1}}
  @media (prefers-reduced-motion:reduce){
    .seek.waiting .seek-ic{animation:none;opacity:.62}
  }
  /* ══ 並べて読む（2026-08-07 §3.2・§3.3）══════════════════════════
     島に降りた紙片は「漂うものを眺める」姿で、読み通すためのものではない
     （縦書き・傾き・色・沈降の薄さ——どれも眺めるための仕掛け）。同じ部屋のことばを、
     色も傾きも落として一枚の紙に組み直す面を、その上に重ねる。

     **地は闇のまま**（2026-08-07 Kosei）。一度は紙の白を敷いたが、白くした時点で
     それは宙ではない別の場所になり、「宙は置き換えない」の大原則が畳から抜ける。
     落とすのは紙のほう——紙片（器・影・色・傾き・縦書き）をぜんぶ外すと、闇の上に
     字だけが残る。宙は下に在り続け、この面はその上の一枚の版面になる。
     地は**透かさない**（var(--space) そのもの）。.gather のように薄い veil を敷くと、
     3%でも下は透ける——実測では頭の帯（検索の器・書くの錠剤）と島の名と灯が読める濃さで
     浮き、読んでいる字と重なった。あちらは「宙のどこから寄ってきたか」を見せる面なので
     透けてよいが、ここは読み通す面：下に何が在るかは、畳めば分かる。
     時刻でごく僅かに移ろう闇（--space）をそのまま使うので、宙と地続きのままではある。

     この面に置く行いは「とじる」と並びの二語と「つづきを、めくる」だけ。
     棚も印ももう見ないも出さない——読む面に押せるものを増やすと、目は必ずそちらへ行く。
     手を伸ばしたくなったら畳めばいい。島は同じ場所に、そのまま在る。 */
  .rsheet{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;
          background:var(--space);
          opacity:0;visibility:hidden;pointer-events:none;
          transition:opacity .34s var(--ease),visibility 0s linear .34s}
  .rsheet.on{opacity:1;visibility:visible;pointer-events:auto;
             transition:opacity .34s var(--ease),visibility 0s}
  .rsheet[hidden]{display:none}
  /* 出口は sticky ではなく flex の固定段（面そのものが縦に分かれている・v4作法）。
     頭の帯（探す・しるし）より上に立つ面なので、上端は safe-area だけ避ければよい。 */
  .rsheet-top{flex:none;display:flex;flex-wrap:wrap;align-items:center;
          gap:2px var(--s3);
          padding:calc(14px + var(--safe-t)) calc(20px + var(--safe-r)) 10px calc(20px + var(--safe-l));
          border-bottom:1px solid var(--rule-faint);background:var(--space)}
  .rsheet-lead{flex:1 1 auto;margin:0;font-family:var(--font-ui);
          font-size:11.5px;letter-spacing:.18em;color:var(--ink-4);
          word-break:keep-all;overflow-wrap:anywhere}
  .rsheet-lead b{color:var(--ink-2);font-weight:400}
  .rsheet-set{flex:none;display:flex;align-items:center;gap:0 var(--s3)}
  .rsheet-opt{background:none;border:none;font-family:var(--font-ui);
          font-size:11px;letter-spacing:.14em;color:var(--ink-4);
          min-height:var(--touch);padding:12px 2px 10px;
          transition:color .22s var(--ease)}
  .rsheet-opt:hover{color:var(--ink-2)}
  .rsheet-opt:active{opacity:.62}          /* 離すのを待たない（Apple §1） */
  .rsheet-opt.on{color:var(--ink-1)}
  .rsheet-opt::after{content:'';display:block;height:1px;margin-top:8px;
          background:var(--rule);opacity:0;transition:opacity .22s var(--ease)}
  .rsheet-opt.on::after{opacity:.7}
  .rsheet-close{flex:none;background:none;border:none;
          border-bottom:1px solid var(--rule-act);
          font-family:var(--font-ui);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
          color:var(--ink-2);min-height:var(--touch);padding:12px 2px;
          transition:color .22s var(--ease),border-color .22s var(--ease)}
  .rsheet-close:hover{color:var(--ink-1);border-color:var(--thread)}
  .rsheet-close:active{opacity:.62}
  /* 狭い画面では、部屋の名で一行・道具で一行と決めておく（2026-08-07）。
     名の長さまかせに折り返させると、「音楽」の部屋では〈とじる〉だけが三行目へ
     落ちて、読む所が60px削れた。どの部屋でも同じ二行にする。 */
  @media (max-width:520px){
    .rsheet-lead{flex:0 0 100%}
    .rsheet-set{margin-right:auto}
  }
  .rsheet-field{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
          -webkit-overflow-scrolling:touch;
          padding:0 calc(12px + var(--safe-r)) calc(28px + var(--safe-b)) calc(12px + var(--safe-l))}
  /* 段は字の幅で決まる（auto-fill）＝机で3〜4段・板で2段・携帯で1段（§3.2）。
     ── 一片ずつ枠で囲む（2026-08-07 Kosei）──────────────────────────
     最初は横罫一本だけで区切っていた。机では行がそろうので読めるが、携帯は必ず
     一段になるので、罫だけだとことばが縦につながって「どこからどこまでが一片か」が
     読めなかった。枠で閉じる（縦罫を nth-child で当てにいく話とは別で、枠なら
     auto-fill の段数がいくつでも必ず一片ぶんを囲む）。

     【姿は紙片と同じ】2026-08-07 Kosei：島に降りた紙片（.isl.sheet .w）とまったく
     同じ材質にする——手染めの紙（--pp）に墨の字、影は一本だけ。気分の色は**紙に
     染みる**（paperOf・島の上とまったく同じ決め方なので、同じことばは島でも読む面でも
     同じ紙をしている）。枠線は要らない：紙そのものが一片の境目を言う。
     字も**縦書きのまま**（2026-08-07 Kosei）。横に寝かせたほうが読みやすいと一度は
     判断したが、この宙のことばは縦に書かれて縦に漂っているもので、読む面でだけ倒すと
     別のことばに見える。島の紙片から降ろすのは、眺めるための規律だけ——寸法の3値
     スナップ・沈降の薄さ・焦点レンズ・散らばり。丈は面のほうで決め（縦書きは丈が
     決まって初めて列に折り返せる）、幅は中身にまかせて短冊のように中央へ置く。
     色が選ばれていないことばは生成り〜灰白の三種（paperOf が本文のハッシュで選ぶ）＝
     **選ばれていない色は空気にしない**（2026-07-28 の恒久ルール）。 */
  /* 紙は自分の幅を持つので、**枠（grid の等幅トラック）に入れない**（2026-08-07）。
     一度 auto-fill の grid で組んだが、150pxのトラックに 176px の紙が入らず
     max-width:100% で切り戻されて、三列の紙が11枚とも溢れた——等幅の枠と
     可変幅の紙は、そもそも噛み合わない。
     並べるのは flex の折り返しで。丈がまちまちなので頭で揃える（下は不揃いのまま
     ——紙を並べた面はそれでいい）。 */
  .rsheet-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
          gap:var(--s3) var(--s2);margin:0 auto;padding:var(--s2) 0 0;
          list-style:none;max-width:1240px}
  /* ── 紙の寸法は、ことばの長さから（2026-08-07 Kosei「紙片内のバランスが悪すぎる。
     二列にしてもいいと思う」）─────────────────────────────────────────
     旧実装は「丈は面が決め、幅は段（1fr）が決める」だった。段が295pxまで広がるのに
     字は一列38px——**紙の四分の一しか使っていなかった**（実測：埋まり率の中央値0.25、
     最小0.13）。「丈を高く取ると一列だけの字の左に、紙の八割が空いたまま残る」と
     旧コメント自身が書いていた症状が、机の画面でそのまま出ていた。

     直し方は島の紙片と同じ——**寸法を字数から純関数で決める**（canvas.js の rsSize）。
     狙いは二列：1列に入れる字数を四段（7・11・16・22）から選び、**二列に折れる
     いちばん浅い丈**を採る。二列で入らない長いことばだけ、列のほうを増やす。
     幅は「列数×1列の幅＋題の列＋余白」で、JSが --rcol / --rtl に書く。
       ・--rcw … 本文1列の幅（font 15px × line-height 2.5 ＝ 37.5px）
       ・--rtl … 題の列（題があるときだけ。無ければ 0）
     列は**二列を下限**にする：一列の紙は足（棚にとっておく）より細くなってしまう。

     丈は「読める字数（--vh）＋足＋奥付」で、足や奥付のぶんは版面から削らずに紙の
     ほうを伸ばす＝押せるものが増えても、読める量は変わらない。
     ── 2026-08-07 夜 ──────────────────────────────────────────
     その足し算を calc で書いていた（--fh ＋ --sh）。足と奥付の**実寸**は決め打ちの
     44px / 52px とは違い、余ったぶんは flex:1 の版面が吸って、--vh より広い版面に
     なる（実測 +8px＝ちょうど一字）。均した丈が一字ぶん崩れていたのはこれで、
     「二列目に一字だけ残る」の正体でもある。
     足し算はやめて、**版面を --vh ちょうどに留め、紙の丈は中身にまかせる**
     （flex の折り返しで並べている面なので、丈が揃っている必要はない）。 */
  .rsheet-cell{--vh:190px;--rcol:2;--rcw:37.5px;--rtl:0px;
          flex:none;                      /* 紙は縮まない（幅は寸法規律が決めている） */
          display:flex;flex-direction:column;align-items:flex-end;
          width:calc(var(--rcol) * var(--rcw) + var(--rtl) + var(--s3) * 2);
          max-width:100%;
          padding:var(--s3);border-radius:var(--edge);
          background:var(--pp,#EBE7DE);color:rgba(30,27,33,.9);
          box-shadow:0 8px 14px -12px rgba(0,0,0,.95)}
  /* 漂流物は色を持たない灰の紙で、字も一段薄い（島の .isl.sheet .w.pd と同じ）。
     奥付（出どころの一行）は版面の下に足される——版面からは削らない（削ると、丈から
     決まっている1列の字数が足りなくなって、計算した列数に収まらない）。 */
  .rsheet-cell.pd{color:rgba(30,27,33,.7)}
  /* 縦の版面。題が右、本文がその左（縦書きの読み順）。
     幅は中身なりで、**紙の右端に寄せる**（中央ではなく）。理由は二つ：
     ・縦書きは右から始まるので、どの紙でも一列目が同じ場所にある＝目が迷わない
     ・打鍵の再生で列が一本増えるたび、中央寄せだと版面が左右に跳ねる
       （島の紙片は寸法を留めて（_pin）これを消しているが、ここは丈が固定なので
        右端に寄せるだけで済む——増えるのは左へだけ） */
  /* 版面は --vh **ちょうど**（flex:1 で余りを吸わせない）。縦書きは丈が決まって
     初めて列に折り返せるので、この一行が「一列に何字入るか」そのもの。 */
  .rsheet-v{writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;text-orientation:mixed;
          flex:none;height:var(--vh);max-width:100%;overflow:hidden}
  /* 2026-08-07：入り切らないことばに掛けていた左フェードは廃止（Kosei「影があって
     途中から読めない」）。薄れる代わりに、紙の丈のほうを伸ばして全文を入れる
     ——JS が溢れを測って --vh を書き足す（島の紙片を広げたのと同じ判断）。 */
  /* 机の画面では余白だけ広げる。丈（--vh）は画面ではなく**ことばの長さ**が決めるので、
     ここで上書きしない（2026-08-07。旧実装の 340px 固定がバランスを崩していた張本人）。 */
  @media (min-width:640px){
    .rsheet-grid{gap:var(--s4) var(--s3);padding-top:var(--s3)}
    .rsheet-cell{padding:var(--s4);
            width:calc(var(--rcol) * var(--rcw) + var(--rtl) + var(--s4) * 2)}
  }
  /* 紙の上の字はすべて墨の濃淡で（闇用の --ink-* は紙では読めない）。
     余白は論理方向で書く——縦書きでは block-end が「左」、inline-start が「上」。
     物理の margin-bottom / margin-left で書くと、縦に倒した瞬間に全部ずれる。 */
  .rsheet-title{margin:0;margin-block-end:var(--s2);margin-inline-start:-.5em;
          font-size:11px;letter-spacing:.2em;
          color:rgba(30,27,33,.55);word-break:keep-all;overflow-wrap:anywhere}
  .rsheet-title::before{content:"「"}
  .rsheet-title::after{content:"」"}
  /* 本文。ここが版面の主。宙では縦書きで漂っていたことばも、ここでは横に寝かせる
     （棚と同じ判断：眺める場所ではなく読み返す場所なので、読みやすさを取る）。
     keep-all は掛けない——文節で折るのは UI 文言の作法で、人のことばには介入しない。 */
  .rsheet-poem{margin:0;font-size:15px;line-height:2.5;letter-spacing:.06em;
          white-space:pre-wrap;overflow-wrap:anywhere;color:inherit}
  /* 打鍵の再生（v2追補 §1）が走っている間だけ、筆先と「ためらいのにじみ」が立つ。
     宙の紙片（.w.nijimi）と同じ見え方だが、こちらは寸法が固定なので留め（_pin）は要らない。 */
  .rsheet-poem.nijimi{filter:blur(.7px)}
  /* 筆先は縦書きでは横一本（字の下に置く一画）。縦棒のままだと字に重なって読めない */
  .rsheet-poem .tcaret{background:rgba(30,27,33,.6);width:1em;height:2px;
          vertical-align:baseline}
  /* 出どころの刻印（§4.4）。漂流物にだけ付く。外へ出る導線は作らない。
     ここだけ横に寝かせるのは、縦の版面の「読み終えたあと」に置く奥付だから
     （縦書きの終わりは左端。そこへ横一行で添える）。
     ── 2026-08-07 夜：名を「…」で切らない ────────────────────────
     一行に押し込んで（nowrap ＋ ellipsis）いた。紙を三列まで広げてもなお、
     数えた12枚**すべて**が切れていた——「— 坂口安吾『わが血を追ふ人々』より」が
     「— 坂口安吾『わが血…」になる。出どころは飾りではなく、借りているものの名。
     切るくらいなら折る（この面の他のどこでも、もう影で切っていない）。
     折る所は書き手が指す（<wbr>：作者名と書名のあいだ）。 */
  .rsheet-src{align-self:stretch;margin:var(--s2) 0 0;
          font-size:10.5px;line-height:1.7;letter-spacing:.14em;text-align:left;
          color:rgba(30,27,33,.45);word-break:keep-all;overflow-wrap:anywhere}
  /* ── 紙の足（2026-08-07 Kosei「並べて読む でも棚に残せるように」）────────
     読み通している最中に出会ったことばを、島へ戻らずに残せるようにする。置くのは
     縦書きの版面が終わったところ＝紙の左下（漂流物なら奥付の下）で、**本文の内側には
     入れない**。行いは一つだけ——「もう見ない」も付箋も持ち込まない（読む面に押せる
     ものを増やすと、目は必ずそちらへ行く、はこの一つを足したうえでも守る線）。
     字は端末のゴシック（§3.3・押すものはUIの側）で、色は紙に載る墨——闇用の --ink-*
     は紙の上では読めない（.rsheet-title / -src と同じ扱い）。 */
  /* 2026-08-07：紙の幅がことばの長さで決まるようになり（rsSize）、二列の紙では
     版面が75pxしかない。足の一語（棚にとっておく＝11px×7字＋印）は110px要るので、
     nowrap のままだと紙の右へ食み出して切れていた。**足は紙の幅を決める側ではない**
     ——道具のほうを折り返させる（丈は --touch のぶん既に取ってある）。
     ── 2026-08-07 夜・Kosei「文章のバランスが悪い」──────────────────────
     折り返させたはいいが、印を横に並べる箱（inline-flex）にしていたので、字の取り分は
     75−22＝53px しか無く「棚に／とっ／ておく」と語の途中で三つに割れていた。
     印を字の**行の中へ**戻す（block ＋ inline の印）と、一行目は「印＋棚に」46px、
     二行目は「とっておく」61px——どちらも 75px に収まって、語の切れ目で折れる。
     切れ目は <wbr> で書き手が指す（この宙の日本語改行の作法。keep-all を掛けて、
     指した所**以外**では折らせない）。 */
  .rsheet-foot{flex:none;align-self:stretch;display:flex;align-items:center;
          min-height:var(--touch);margin-block-start:calc(var(--s1) * -1)}
  .rsheet-keep{display:block;
          min-height:var(--touch);margin-inline-start:-2px;padding:11px 2px;
          background:none;border:none;cursor:pointer;text-align:left;
          font-family:var(--font-ui);font-size:11px;letter-spacing:0.1em;line-height:1.55;
          color:rgba(30,27,33,.5);
          transition:color .22s var(--ease),opacity .22s var(--ease)}
  .rsheet-keep .ic-shelf{display:inline-block;vertical-align:-3px;margin-inline-end:6px}
  .rsheet-keep .txt{word-break:keep-all;overflow-wrap:anywhere}
  .rsheet-keep:hover{color:rgba(30,27,33,.78)}
  .rsheet-keep:active{opacity:.62}          /* 離すのを待たない（Apple §1） */
  .rsheet-keep.on{color:rgba(30,27,33,.8)}
  /* 印は宙の札（.hold-act）と同じ形。色だけ紙用に差し替える——札は闇の上に立つので
     --thread / --rule-act を使っているが、それは紙の上では見えない。 */
  .rsheet-keep .ic-shelf .b{background:rgba(30,27,33,.32)}
  .rsheet-keep .ic-shelf .p{border-color:rgba(30,27,33,.5)}
  .rsheet-keep.on .ic-shelf .p{bottom:4px;
          background:rgba(30,27,33,.7);border-color:rgba(30,27,33,.7)}
  .rsheet-more{display:flex;justify-content:center;padding:var(--s4) 0 var(--s3)}
  .rsheet-more[hidden]{display:none}
  .rsheet-mb{background:none;border:none;border-bottom:1px solid var(--rule-act);
          font-family:var(--font-ui);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
          color:var(--ink-2);min-height:var(--touch);padding:13px 6px;
          transition:color .22s var(--ease),border-color .22s var(--ease)}
  .rsheet-mb:hover{color:var(--ink-1);border-color:var(--thread)}
  .rsheet-mb:active{opacity:.62}

  /* ── 集まってきた片（2026-08-02）──────────────────────────────
     返ってきたことばは、宙のどこに在っても、この面へ流れ着いて並ぶ。
     出どころ（画面に見えていた片はその場所から、見えていないものは宙の外から）
     から飛んでくる＝「寄ってきた」ことが動きで分かる。 */
  .gather{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;
          background:rgba(8,8,13,.92);
          opacity:0;visibility:hidden;pointer-events:none;
          transition:opacity .4s var(--ease),visibility 0s linear .4s}
  .gather.on{opacity:1;visibility:visible;pointer-events:auto;
             transition:opacity .4s var(--ease),visibility 0s}
  .gather[hidden]{display:none}
  /* 頭の帯（探すの器・しるし）はこの面より上に居るので、その下から始める */
  .gather-top{flex:none;display:flex;align-items:center;justify-content:space-between;
          gap:var(--s2);
          padding:calc(74px + var(--safe-t)) calc(20px + var(--safe-r)) 6px calc(22px + var(--safe-l))}
  .gather-lead{margin:0;font-size:12px;letter-spacing:.16em;color:var(--ink-3);
          word-break:keep-all;overflow-wrap:anywhere}
  .gather-lead b{color:var(--ink-1);font-weight:400}
  .gather-close{flex:none;background:none;border:none;border-bottom:1px solid var(--rule-act);
          font-family:var(--font-ui);font-size:var(--t-meta);letter-spacing:var(--tr-meta);
          color:var(--ink-2);min-height:var(--touch);padding:12px 2px;
          transition:color .22s var(--ease),border-color .22s var(--ease)}
  .gather-close:hover{color:var(--ink-1);border-color:var(--thread)}
  .gather-close:active{opacity:.62}
  .gather-field{flex:1;min-height:0;display:flex;overflow-y:auto;overscroll-behavior:contain;
          padding:var(--s2) calc(20px + var(--safe-r)) calc(24px + var(--safe-b)) calc(20px + var(--safe-l))}
  /* 余った所は margin:auto が食う＝収まる時は中央、溢れる時は上から素直に伸びる
     （align-content:center は溢れた時に上を切り落とす・書く柱で踏んだ穴と同じ） */
  .gather-in{margin:auto;display:flex;flex-direction:row-reverse;flex-wrap:wrap;
          justify-content:center;align-items:flex-start;gap:16px;max-width:1120px}
  /* 片の姿は、島に降りた時の紙片（.isl.sheet .w）と同じ物にそろえる */
  .gw{position:relative;writing-mode:vertical-rl;white-space:pre-wrap;overflow-wrap:anywhere;
      max-height:min(52dvh,320px);max-width:18em;
      font-size:14px;line-height:2;letter-spacing:.12em;
      padding:20px 16px;border-radius:var(--edge);cursor:pointer;
      background:var(--pp,#EBE7DE);
      color:rgba(30,27,33,calc(.52 + .44*var(--a,.9)));
      box-shadow:0 10px 20px -14px rgba(0,0,0,.95)}
  /* will-change は**飛んでいる間だけ**（2026-08-03 カクツキ）。付けっぱなしにすると、
     集まってきた片の枚数だけGPUに面が居座り続ける（探すの結果は数十枚ある）。
     携帯ではそれだけで描画がソフトウェアへ落ちる——7/31 に filter:blur を全廃した
     のと同じ理由。JSが飛ばし終わりにこの class を外す。 */
  .gw.flying{will-change:transform,opacity}
  .gw.h{writing-mode:horizontal-tb;max-width:22em;max-height:none}
  .gw.pd{color:rgba(30,27,33,.62)}
  .gw.held{color:rgba(30,27,33,.96);
      box-shadow:0 0 0 1px var(--rule-act),0 18px 34px -18px rgba(0,0,0,.95)}
  @media (prefers-reduced-motion: reduce){ .gw{transition:opacity .25s ease!important} }
  /* 島の中で灯す（.lit・.gathered）様式は 2026-08-02 に畳んだ——寄せた片は
     宙の上で灯るのではなく、.gather の面へ集まってくる。 */
  /* 「もう見ない」と決めた紙は、放した時に静かに引く（出来事にしない）。
     集まってきた片（.gw）も同じ——同じ行いは、どこでも同じ姿で応える。 */
  .w.mutedout:not(.held),.gw.mutedout:not(.held){opacity:0!important;pointer-events:none}
  .gw{transition:opacity .5s var(--ease)}
  /* ひとこと（0件・不通のときだけ。数字は出さない） */
  .whisper{position:fixed;left:50%;bottom:calc(15dvh + var(--safe-b));transform:translateX(-50%);
           /* 「並べて読む」（z:30）の上まで届かせる——棚に届かなかった、が
              紙の裏に隠れると、押した結果が誰にも見えないことになる。触れないので
              （pointer-events:none）、上に置いても面の邪魔はしない。 */
           z-index:32;margin:0;color:var(--ink-3);font-size:12px;letter-spacing:.14em;
           text-align:center;opacity:0;transition:opacity .5s var(--ease);pointer-events:none;
           word-break:keep-all;max-width:86vw}
  .whisper.on{opacity:1}
  @media (prefers-reduced-motion: reduce){
    .w{transition:opacity .3s ease}
    .ripple{animation:none;opacity:0}
    .isl-nm,.fire,.isl-w{transition:none}
    .tcaret{animation:none}
    .hold{transition:opacity .2s ease;scale:1}
  }
  /* ════ 以下、mood.html から移植した「書く」一式（2026-07-30・切替のため）════
     行番号まで同じ順で写している。切替が確定して mood.html を畳んだら、こちらが正本。 */
  /* ── 放ったあとの、ひと呼吸（2026-07-27）──────────────────────
     柱より前・宙より前に一度だけ立ち、自分で退く。触れれば早く退く（待たせない）。
     ボタンは置かない——「確認」を押させると、放つ行為が二段階になる。 */
  .sent{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
        align-items:center;justify-content:center;gap:var(--s2);
        background:rgba(8,8,13,.72);
        backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
        opacity:0;pointer-events:none;visibility:hidden;
        transition:opacity .5s var(--ease),visibility 0s linear .5s}
  .sent:not(.on){backdrop-filter:none;-webkit-backdrop-filter:none}   /* 畳んだ面はぼけも畳む */
  .sent.on{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .5s var(--ease)}
  .sent-1{margin:0;font-size:var(--t-lead);letter-spacing:var(--tr-lead);color:var(--ink-1);
          /* 立ち上がりは下から。放たれたものが昇る向きに合わせる */
          transform:translateY(6px);opacity:0;
          transition:transform .7s var(--ease),opacity .7s var(--ease)}
  .sent-2{margin:0;font-size:var(--t-meta);letter-spacing:var(--tr-meta);color:var(--ink-3);
          text-align:center;transform:translateY(6px);opacity:0;
          transition:transform .7s var(--ease) .12s,opacity .7s var(--ease) .12s;
          word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
  .sent.on .sent-1,.sent.on .sent-2{transform:none;opacity:1}
  @media (prefers-reduced-motion: reduce){
    .sent-1,.sent-2{transform:none;transition:opacity .3s ease}
    .sent{transition:opacity .3s ease,visibility 0s linear .3s}
    .sent.on{transition:opacity .3s ease}
  }
  /* 書く（登録済み・2026-07-28 の 4-5 で「放つ」から改名＝不可逆の決定 castSend と
     同名だったため。「放つ」は決定にだけ残す）：宙の下辺に静かな一語。
     この一語が宙で唯一の主動作なので、
     ホームバーの下に潜らせない（vh はアドレスバーの下まで数える／--safe-b はその縁） */
  /* 2026-08-02：下辺の帯の中央から、頭の帯の右へ。罫一本ではなく器（角丸の帯）で
     押せることを言う——探すの器と同じ形にそろえ、二つで一組に見えるようにする。 */
  /* 未ログインでは a、ログイン済みでは button（2026-08-08）。姿は一つ——罫も下線も
     出さないので text-decoration:none、a には効かない font 継承もここで揃える。 */
  .cast-btn{display:inline-flex;align-items:center;gap:6px;flex:none;
            height:42px;padding:0 18px;border:none;border-radius:21px;
            background:rgba(250,248,243,.10);cursor:pointer;text-decoration:none;
            font-family:var(--font-ui);color:var(--ink-1);font-size:14px;letter-spacing:0.18em;
            white-space:nowrap;
            transition:background .22s var(--ease),opacity .22s var(--ease)}
  .cast-btn:hover{background:rgba(250,248,243,.15)}
  .cast-btn:active{opacity:.62}
  .cast-btn .pl{font-size:13px;color:var(--ink-3);line-height:1}
  /* 書く柱が立っている間は、下の「放つ」は退く。
     柱の背景が半透明なので、放つ／宙 へ 放 つ が二つ並んで見えていた（v12.1） */
  .cast-btn.away{opacity:0;pointer-events:none;transition:opacity .35s ease}
  /* 2026-07-27：部屋の外からも放てるようにした（B-8 の「必ず部屋に入ってから」を解く）。
     理由は順序の矛盾——説明は「行き先を決めずにことばを放つ場所」と言うのに、実装は
     書く前に14部屋から行き先を決めさせていた。「なんのことを書くか選ぶところから
     判断しなきゃいけない」と言われたのはこれ。**書いてから、置き場所をえらぶ**へ直した。
     ことばが必ずどこかの部屋に属することは変わらない（選ぶのが後になっただけ）。 */
  /* アーカイブの部屋（旧いことばの置き場）には、もう新しいことばを放てない */
  body.in-room-archived .cast-btn{display:none}
  /* 置き場所の札。部屋の名前は「分類」ではなく置き場所なので、選択肢の列ではなく
     名前が並んでいるだけの姿にする（丸い錠剤やセグメントは作らない・v3.10の作法）。 */
  /* S3（仕様書 v1.0 §2.2）：置き場所は左揃えの一枚岩。中央寄せで折り返していたので、
     行ごとに開始位置が動き、18個の名前が「揃った列」に見えなかった＝目が行頭を探す。
     区画の高さは 132px で頭打ちにし、溢れは中で縦に送る（柱そのものは伸ばさない）。 */
  .where{display:flex;flex-wrap:wrap;gap:2px 14px;justify-content:flex-start;
         width:100%;max-width:22em;max-height:132px;overflow-y:auto;overscroll-behavior:contain;
         scrollbar-width:thin;scrollbar-color:var(--rule-faint) transparent}
  .where button{background:none;border:none;padding:9px 2px;min-height:var(--touch);
                font-family:var(--font-ui);font-size:var(--t-meta);letter-spacing:0.14em;
                color:var(--ink-4);border-bottom:1px solid transparent;
                transition:color .22s var(--ease),border-color .22s var(--ease)}
  .where button:hover{color:var(--ink-2)}
  .where button:active{opacity:.62}
  .where button.on{color:var(--ink-1);border-bottom-color:var(--thread)}
  /* 4-10（2026-07-28）：1つ選んだら他を沈め、選んだものだけ立たせる。
     18個がフラットに並ぶと、選択済みのフィードバックが弱かった。
     沈んだ選択肢は --ink-4（AA下限）を割るが、これは「選び直せる副次の状態」で、
     触れれば（hover/focus）すぐ元の声に戻る——読ませる文ではなく気配。 */
  .where.picked button:not(.on){color:rgba(250,248,243,.34)}
  .where.picked button:not(.on):hover,
  .where.picked button:not(.on):focus-visible{color:var(--ink-2)}
  body.in-room .lp,body.in-room .about{display:none}

  /* 宙の中で書く：モーダルではなく、宙が少し暗くなり書く柱が立つ。
     v14：書いている間は宙をもう一段うしろへ下げる（暗くする＋薄くぼかす）。
     漂うことばが便箋の裏で読めていると、自分の字と他人の字が混ざって落ち着かない
     （＝Apple §12「集中させたい時は、背後を暗くして押しやる」）。消すのではなく、退かせる。 */
  /* 柱が画面より高くなった時は、切り落とさずに送れるようにする（v2.2）。
     align-items:center のまま溢れると上端が掴めなくなる（中央寄せの古い穴）ので、
     上端そろえ＋.cast-inner の margin:auto で中央に置く——余白がある時は中央、
     足りない時は上から素直に伸びる。 */
  /* S1（仕様書 v1.0 §2.2）：背を「面」として成立させる。
     旧実装は一様な膜（rgba(8,8,13,.74) + blur 3px）一枚だったので、背後の宙の濃さが
     そのまま透けた——島の名や紙片の上では字が混ざって読めなかった。上から下へ濃くなる
     縦のグラデーションに置き換える。上端 .55 は「宙の上に立っている」感覚を残すため、
     字が乗る領域（32%以下）は不透明に近づける。blur は 3px のまま固定（遷移させない）。 */
  .cast{position:fixed;inset:0;z-index:12;display:flex;align-items:flex-start;justify-content:center;
        overflow-y:auto;overscroll-behavior:contain;
        background:linear-gradient(180deg,rgba(8,8,13,.55) 0%,rgba(8,8,13,.92) 32%,var(--space) 55%);
        opacity:0;pointer-events:none;visibility:hidden;
        /* ぼけの寸法は**遷移させない**（2026-07-31 夜）。backdrop-filter は画面ぜんぶを
           取り込んでぼかし直す処理で、その半径を0.6秒かけて動かすと、書く柱がひらく
           あいだ毎フレーム全画面のぼかしを作り直す＝ひらいた瞬間に必ずつっかえる。
           ぼけは最初から3pxで置いておき、渡すのは opacity だけ（GPUに載る）。 */
        backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
        transition:opacity .6s var(--ease),visibility 0s linear .6s}
  /* 畳んでいる間は、ぼけそのものを外す（2026-08-03・遠景のカクツキ）。
     backdrop-filter を宣言した要素は「背後の画面を取り込む面」で、閉じていても
     ブラウザによっては合成の面が常駐する（iOS/Safari で顕著）。柱は宙の上に
     ずっと畳まれているので、宙を動かすあいだ全画面ぶんの取り込みが毎フレーム
     居座ることになる。ぼけが要るのは開いている間だけ。
     半径は遷移させない作法（上のコメント）はそのまま——none→3px は class が
     入れ替わる一瞬の切り替えで、opacity の 0.6 秒と同時に起きる。 */
  .cast:not(.on){backdrop-filter:none;-webkit-backdrop-filter:none}
  .cast.on{opacity:1;pointer-events:auto;visibility:visible;
           transition:opacity .6s var(--ease),visibility 0s}
  /* 柱が立っているあいだ、宙の名（ロゴの戸）は退く。柱は画面より高くなることがあり、
     その時「とじる」（柱の左上・S6）はロゴとちょうど同じ場所に来る——押せるものが
     二つ重なり、上に居るロゴが必ず勝つ。書いている間だけ、名は引く。
     ── 2026-08-08 Kosei「この閉じるボタンが機能していない」──────────────
     **退いていたのは姿だけだった。** pointer-events は、親が none と言っても
     子が auto と言えばそこだけ復活する——帯の子（header a / button / input）は
     まさにそう書いてあるので、姿の消えた「たより」（.brand-home・左上44px）が
     「とじる」の真上に居座り、指を全部さらっていた。押しても何も起きない、の正体。
     帯は z-index 20、柱は 12 なので、上に居るのは常に帯のほう。
     子まで含めて指を止める（`header *` は `header button` より強い＝!important は要らない）。 */
  body.casting header{opacity:0;transition:opacity .35s var(--ease)}
  body.casting header,body.casting header *{pointer-events:none}
  @media (prefers-reduced-transparency: reduce){
    .cast.on{background:rgba(8,8,13,.97);backdrop-filter:none;-webkit-backdrop-filter:none}
  }
  /* 気分の色の環境光。帯に触れて色を選んだ時だけ、書く面の空気にその色がごく淡く広がる
     （--mood-air は paint() が入れ、触れていなければ入れない＝「選ばれていない色は
     空気にしない」の恒久ルールをそのまま守る）。便箋の上方、字の生まれるあたりから。
     ::before は最初の子として置かれるので、.cast-inner（positioned）より必ず下に描かれる。 */
  .cast::before{content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(70% 55% at 50% 38%,var(--mood-air,transparent),transparent 72%);
    opacity:0;transition:opacity 1.2s var(--ease)}
  .cast.on::before{opacity:1}
  /* position:relative ＝ 自前カーソル（.vcaret）とミラー要素の座標の基準 */
  /* 中央に合わせる基準は「箱の外枠」でも「右端の列」でもなく、右から2本目の罫。
     罫は4本とも各列の左境に立つ（右端から --cw, 2--cw, 3--cw, 4--cw）ので、
     右から2本目＝幅4列の紙のちょうど中心線。紙をそのまま中央に置けば、その一本が
     画面の中央に来る——つまり、ここに transform は要らない。
     v13.1 では短い言葉の見え方を優先して箱を左へ1.5列ずらしていたが、それだと
     字数・色・放つを含む柱ごと左へ寄って見える。便箋という物を中央に据える方を採る。 */
  .cast-inner{position:relative;margin:auto;display:flex;flex-direction:column;align-items:center;
              gap:var(--s2);padding:var(--s3);max-width:92vw}
  /* ── S2（仕様書 v1.0 §2.2）：三つの区画に分ける ────────────────────
     順序は「本文 → どこへ → いろ → かたち → 告知 → 出口」。必須（本文・どこへ）と
     任意（いろ・かたち）のあいだに罫が入ることで、どこまでが必須かが線で分かる。
     区画の見出しは 10px・字間 .22em・--ink-4・左揃え——読ませる文ではなく、
     どこからどこまでが一つの決めごとかを言う小さな札。罫は区画のあいだにだけ引く。 */
  .cast-sec{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;
            gap:var(--s1);padding:var(--s2) 0}
  .cast-sec + .cast-sec{border-top:1px solid var(--rule-faint)}
  .sec-lead{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
            width:100%;margin:0;font-size:10px;letter-spacing:0.22em;color:var(--ink-4)}
  /* ── 宙の便箋：4本の縦罫（v13.1）────────────────────────────
     列幅＝line-height（--cw）、1列 --cch 字。4列 × 20字 = 80字＝本文の上限とちょうど同じ。
     箱の寸法を固定するのが要点：これまで width:auto だったので、字が増えて列が伸びるたび
     箱そのものが広がり、中央寄せのせいで書いている場所が左へずれていた
     （＝カーソルが動いて見えた原因の半分）。空でも罫は4本立っている（便箋の姿）。
     画面が低い端末では字面と列幅だけを詰め、20字×4列の関係は崩さない。 */
  .cast{--cw:36px;--fs:17px;--cch:20}
  /* 柱の総丈 ＝ 便箋 + 363px（字数・題・色の二段・付箋・放つ・添え書き・間）。
     v14で色の帯の的を44pxに広げた分、v2.2で題の一行（44px＋gap12px＝56px）が増えた分だけ
     丈が伸びるので、しきい値も同じだけ上げてある（740/690/640 → 796/746/696）。
     低い画面では字面と列幅だけを詰め、20字×4列の関係は絶対に崩さない。 */
  /* 2026-07-28：題・色・向きを「任意の三つ」の一行へ沈めたぶん柱が縮んだので、
     しきい値も同じだけ下げた（実測：題57 + 色167 + 旧向きボタン56 − 行68 ≒ 200px）。
     出口は sticky で常に届くから、便箋の字面はできるだけ大きいまま保つ。
     同日夜、色（帯二本＋色名 ≒ 140px）だけを畳むのをやめたので、その分だけ戻す。 */
  @media (max-height:740px){ .cast{--cw:32px;--fs:15px} }
  @media (max-height:690px){ .cast{--cw:28px;--fs:13px} }
  @media (max-height:640px){ .cast{--cw:26px;--fs:12px} }
  /* v16：textarea → contenteditable。vertical-rl の <textarea> は Chrome/Safari とも
     IME変換中の文字（プレビュー・候補）を正しく描けない実装上の穴があり、宙で漢字変換が
     効かなかった（textareaは専用の内部エディタで、日本語縦書き＋IMEの対応が薄い）。
     contenteditable は通常の編集エンジンを使うため、変換の見え方が安定する。 */
  .cast .ctext{writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;text-orientation:mixed;
        line-break:strict;white-space:pre-wrap;outline:none;cursor:text;
        /* +3px は「20字目が1px足りずに次の列へ落ちる」のを防ぐ遊び（字送りの端数のため） */
        /* 罫の本数はプランで決まる（--ccol／収益モデル v1・2026-08-07）。既定は4本＝
           無料会員の80字（1列20字）。有料会員は6本＝120字。罫そのものは下の
           repeating-linear-gradient が幅なりに引くので、変えるのはこの一つだけ。 */
        width:calc(var(--cw) * var(--ccol,4));height:calc(var(--cch) * (var(--fs) + 0.14em) + 3px);
        background:none;border:none;color:var(--chalk);
        /* ここはことばそのものが入る枠なので明朝（§3.3）。contenteditable の div で
           textarea ではないから、トークン側の一行では拾われない——名指しで書く。 */
        font-family:var(--font-body);font-size:var(--fs);line-height:var(--cw);letter-spacing:0.14em;
        padding:0;overflow:hidden;
        /* 縦罫は列の境目に一本ずつ。vertical-rl は右から埋まるので 270deg（右→左）で数える */
        background-image:repeating-linear-gradient(270deg,
              transparent,transparent calc(var(--cw) - 1px),
              var(--rule-faint) calc(var(--cw) - 1px),var(--rule-faint) var(--cw));
        /* ネイティブカーソルは縦書きだと字面まで縮むので隠し、.vcaret を重ねる */
        caret-color:transparent}
  /* 横書きで書く（2026-07-27）。縦書きだと、スマホのIME変換候補（必ず横に出る）と
     字の流れが直交して打ちにくい——向きは書く人が決める。罫は横罫に倒し、
     自前カーソルも縦棒に戻す（ネイティブのカーソルは横書きなら素直に出る）。 */
  .cast .ctext.h{writing-mode:horizontal-tb;-webkit-writing-mode:horizontal-tb;
        width:calc(var(--cw) * var(--ccol,4) + 6em);height:auto;min-height:calc(var(--cw) * var(--ccol,4));
        line-height:2.2;caret-color:var(--thread);
        background-image:repeating-linear-gradient(180deg,
              transparent,transparent calc(2.2em - 1px),
              var(--rule-faint) calc(2.2em - 1px),var(--rule-faint) 2.2em)}
  /* .cast-dir の単独スタイルは 2026-07-28 に削除：向きの切り替えは「任意の三つ」の行
     （.cast-opt-row）へ移り、姿もあの行の button と同じになった。旧指定は .ruled の
     border-bottom 前提（color だけ上書き）だったので、.ruled を外した今は残すと死に体。
     同日 4-6：中身を状態表示（罫のミニアイコン＋「縦／横」）にしたぶんの器だけ持つ。
     横は同じ罫が倒れた姿＝rotate（別のアイコンを描かない。物は一つ、向きが変わるだけ）。 */
  /* S5：二択を同時に見せる。姿は「罫一本」だけ——選択中は墨が立って罫が引かれ、
     非選択は退く。塗りも角丸の器も作らない（作法1-2）。各44px。 */
  .cast-dir{display:inline-flex;align-items:center;gap:var(--s2)}
  /* 2026-08-06：選んでいないほうが「罫なし・--ink-4」＝ただの添え書きに見えて、
     押せることが姿に出ていなかった（作法：押せるものには罫が一本ある）。
     退いた側にも罫は引く——ただし --rule-faint（22%）で、選んだ側の --thread とは
     ひと目で違う。「選ばれていないものを空気にしない」の線もこれで守れる。 */
  .cast-opt-row .cast-dir button{min-width:56px;text-align:center;
                  color:var(--ink-3);border-bottom:1px solid var(--rule-faint)}
  .cast-opt-row .cast-dir button[aria-checked="true"]{color:var(--ink-1);
                  border-bottom-color:var(--thread)}
  .cast-opt-row .cast-dir button:active{opacity:.62}
  /* :empty が成立するのは中身が本当に空（<br>も残っていない）時だけ。JS側で保証する */
  .cast .ctext:empty:before{content:attr(data-placeholder);color:var(--ink-4)}
  /* 自前カーソル：列幅いっぱい（＝横書きの行と同じ背丈）の横棒。
     追従アニメーションは付けない——ここは「置いた場所に、ちゃんと在る」ことが主題で、
     滑らせるとそれ自体が不安定に見える（宙の他のUIは spring で動くが、ここは例外）。 */
  .vcaret{position:absolute;height:2px;border-radius:1px;background:var(--thread);
          pointer-events:none;display:none;animation:vcaretBlink .9s steps(1) infinite}
  @keyframes vcaretBlink{50%{opacity:0}}
  @media (prefers-reduced-motion: reduce){ .vcaret{animation:none} }
  /* 【2026-08-07 夜・書体を一本へ戻した時に測った】Shippori Mincho は等幅の数字
     （tabular figures）を持っていない——tabular-nums を書いても効かず、字ごとの
     幅の差は 20px で 1.17px 残る（0〜9を実測）。行そのものが伸び縮みしないよう、
     ここは幅を先に取っておく（4.6em＝「80/80」＋字間ぶん）。tabular-nums は
     消さない：明朝が落ちて端末の書体になった時には、そちらが効く。 */
  .cast-count{font-family:var(--font-ui);font-size:var(--t-mono);
              font-variant-numeric:tabular-nums;
              display:inline-block;min-width:4.6em;text-align:right;
              letter-spacing:0.3em;color:var(--ink-4);
              transition:color .3s var(--ease)}
  /* 打った過程が記録されている間だけ、字数の隣で小さく呼吸する点（カーム・テクノロジー：
     周縁で気配だけ伝える）。仕様どおり3文字目から現れ、放つと消える＝trace の在る無しが
     そのまま画面の真実になる。赤いREC記号にはしない——監視ではなく、墨が乾いていない印。
     現れ方は opacity の遷移でゆっくり滲ませる（ふっと点くと「始まった」と威圧に読める）。 */
  .trace-dot{display:inline-block;width:4px;height:4px;margin-left:10px;border-radius:50%;
             background:var(--ink-4);vertical-align:2px;
             animation:traceBreathe 4s ease-in-out infinite}
  @keyframes traceBreathe{0%,100%{opacity:.25}50%{opacity:.7}}
  @media (prefers-reduced-motion: reduce){ .trace-dot{animation:none;opacity:.45} }
  /* 80字で打鍵は静かに止まる。止まる理由が画面のどこにも出ていないと、
     端末が固まったように見える——残りが少なくなったら数字だけ色を変え、
     いっぱいになったら糸の色で「ここまで」と言う（Apple §16 status feedback）。 */
  .cast-count.near{color:var(--ink-2)}
  .cast-count.full{color:var(--thread)}
  /* 題（v2.2 §2.1・§3）：書き手が付けるのはこれ一つだけ。10字以内・任意。
     便箋のすぐ下に置く——名は紙より後（開くと筆先が立つのは便箋のほうで、ここではない）。
     付箋と同じ「罫一本」の姿にそろえ、中央に据えて〈この一枚の名〉であることを示す。
     的は44px（v14）。書いている間の字数表示は付けない：10字は数える前に見て分かる。 */
  #castTitle{width:100%;max-width:min(70vw,300px);background:none;border:none;
             border-bottom:1px solid var(--rule);color:var(--ink-1);font-family:var(--font-ui);
             font-size:13.5px;letter-spacing:0.16em;text-align:center;
             padding:12px 2px;min-height:var(--touch);outline:none;
             transition:border-color .22s var(--ease),color .22s var(--ease)}
  #castTitle::placeholder{color:var(--ink-4);letter-spacing:0.12em}
  #castTitle:focus{border-bottom-color:var(--ink-4)}
  /* 色｜v11.1：パステル固定をやめ、色相バー＋トーンバーの二段に戻す。
     上＝色相（鮮やかなまま全周）、下＝淡い⇄鮮やか⇄深い。選んだ色はその場で文字にのる。
     v14：帯の見た目は11pxのまま、指の的だけ上下パディングで44pxに広げた
     （background-clip:content-box なので、色は細い帯にしか乗らない）。 */
  .picker{display:flex;flex-direction:column;gap:2px;align-items:stretch;width:min(70vw,300px)}
  /* S4：帯の左に固定幅34pxのラベル（色相／濃さ）。帯は残りを取る＝帯の実寸は
     端末で変わるが、つまみの位置は割合で置いているので何も狂わない。 */
  .bar-row{display:flex;align-items:center;gap:var(--s1);width:100%}
  .bar-tag{flex:0 0 34px;width:34px;font-size:10px;letter-spacing:0.08em;color:var(--ink-4)}
  /* 見出しの右端に置く、いまの色（丸い見本＋名）。見本は22px、縁は紙の白のごく薄い一本。 */
  .sec-now{display:inline-flex;align-items:center;gap:var(--s1)}
  .sec-swatch{width:22px;height:22px;border-radius:50%;flex:none;
              border:1px solid rgba(250,248,243,.18);background:transparent}
  /* 畳まずに置く色の器（2026-07-28 夜）。開閉を持たないので .cast-opt とは別の名前にする
     ——同じ姿でも、片方は「開く箱」、片方は「ずっとそこにある帯」で、役目が違う。 */
  /* 区画の中では左端にそろえる（S2/S3）。中央寄せの部品と左揃えの部品が同じ柱に
     混ざると、行頭の位置が区画ごとに動いて「揃っていない」に見える。 */
  .cast-color{display:flex;flex-direction:column;align-items:flex-start;
              width:100%;margin:0}
  /* いま選んでいる色の名。触るたびに変わる＝二本の帯の役目が、触れば分かる */
  .picker-now{font-size:11px;letter-spacing:0.14em;color:var(--ink-4);white-space:nowrap;
              transition:color .3s var(--ease)}
  /* box-sizing:content-box が要点：global の border-box では height:11px に padding が
     食われて帯そのものが消える（＝色が見えなくなる）。ここだけ content-box に戻す。 */
  .colorbar{position:relative;box-sizing:content-box;flex:1;min-width:0;height:11px;
            padding:17px 0;background-clip:content-box;border-radius:6px;
            cursor:pointer;touch-action:none}
  .huebar{background-image:linear-gradient(90deg,
            hsl(0,80%,60%),hsl(40,80%,60%),hsl(80,80%,60%),hsl(120,80%,60%),
            hsl(160,80%,60%),hsl(200,80%,60%),hsl(240,80%,60%),hsl(280,80%,60%),
            hsl(320,80%,60%),hsl(360,80%,60%))}
  /* 濃さの帯は、選んでいる色相で描き替わる（paint が backgroundImage を書く）。
     ここに置くのは既定色（H0=210）の姿——赤のまま立ち上がって一拍後に青へ、を作らない。 */
  .tonebar{background-image:linear-gradient(90deg,hsl(210,24%,88%),hsl(210,78%,64%),hsl(210,66%,46%))}
  .bar-knob{position:absolute;top:50%;left:0;width:20px;height:20px;border-radius:50%;
            transform:translate(-50%,-50%);border:1.5px solid var(--chalk);
            background:transparent;pointer-events:none;
            box-shadow:0 0 10px rgba(0,0,0,.6);transition:background .18s var(--ease)}
  /* ── 任意の三つ（2026-07-28）────────────────────────────────
     本線は「書く → どこへ → 放つ」。題・色・向きは必須ではないので、
     一行に沈めて、触れたときだけその場で開く。
     ・題／色 … data-opt で対応する箱の hidden を外す
     ・向き   … それ自体が行為なので、この行で直接切り替える（castDir をここへ移設） */
  .cast-opt-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
                /* 間は --s3。--s4(32px) だと 375px 幅で計 309px＞行幅 305px となり
                   4px だけ溢れて二行に折れた（実測 2026-07-28）。一行に沈めるのが主題。
                   2026-08-06 に的を広げた後の実測（375px 幅）：題 96 + 間 20 + 縦横 124
                   ＝240px で、まだ一行に収まる。折り返した時のために行間だけ持たせる。 */
                gap:var(--s2) var(--s3);margin:0}
  /* 2026-08-06（利用者の指摘：題と向きが押しにくい）。
     字は 11.5px・墨は --ink-4（数字と控えの段）・罫は透明——つまり「押せるもの」の
     合図が一つも出ていない、ただの薄い添え書きだった。指の的は 44px あったので、
     押しにくいのは寸法ではなく**姿**のほう。
     字を --t-meta（12px）へ、墨を --ink-2（操作の主）へ、罫は常時 --rule-act
     （＝この宙で「押せる」を意味する唯一の罫）。塗りも角丸の器も作らない。 */
  .cast-opt-row button{background:none;border:none;font-family:var(--font-ui);cursor:pointer;
                       min-height:var(--touch);padding:12px 10px;
                       font-size:var(--t-meta);letter-spacing:0.18em;color:var(--ink-2);
                       border-bottom:1px solid var(--rule-act);
                       transition:color .2s var(--ease),border-color .2s var(--ease)}
  .cast-opt-row button:hover{color:var(--ink-1)}
  .cast-opt-row button:active{opacity:.62}
  .cast-opt-row button[aria-expanded="true"]{color:var(--ink-1);
                       border-bottom-color:var(--thread)}
  /* 中身が入っている引き金は、閉じていても分かるように点を一つ添える */
  .cast-opt-row button[data-filled="1"]::after{content:"・";color:var(--ink-3)}
  .cast-opt{display:flex;flex-direction:column;align-items:flex-start;
            gap:var(--s2);width:100%;margin:var(--s1) 0 0;
            /* 開いた箱を scrollIntoView で見せるとき、sticky の出口の裏に
               尻を差し込ませない遊び（出口の丈 ≒72px + ひと呼吸）。
               375×560 実測：これが無いと色名の行が出口の下に 8px 欠けた（2026-07-28） */
            scroll-margin-bottom:88px;scroll-margin-top:var(--s2)}
  .cast-opt[hidden]{display:none}
  /* 出口は sticky（v4 の作法：スクロールする面の出口は、必ず指の届くところに残す）。
     2026-07-27 に「置き場所をえらぶ」と「向きの切り替え」が加わって柱が伸び、
     背の低い画面では「放つ」が折り返しの下へ落ちた（812pxの端末で実測 964px＝画面外）。
     柱を縮めるのではなく、放つ／閉じるだけを面の底へ貼り付けて always reachable にする。
     2026-07-28：背景のグラデを止めて不透明にした。旧実装は上端 alpha 0 → .86（38%）
     の帯で、sticky の裏をスクロールで通過する要素（放つ直前は cast-note、位置により
     castWhere も）がボタンの字面に透けて重なった。せり上がる感じは border-top 一本で足りる。
     align-self:stretch は .cast-inner が align-items:center のため（伸ばさないと両端から
     下が覗く）。safe-b は iPhone のホームバー分の下余白。 */
  /* S6：下辺の帯に残すのは「放つ」だけ。その直下に、放とうとしているものの要約を一行。 */
  .cast-row{position:sticky;bottom:0;z-index:2;align-self:stretch;
            display:flex;flex-direction:column;gap:var(--s1);
            align-items:center;justify-content:center;
            padding:var(--s2) var(--s3) calc(var(--s2) + var(--safe-b,0px));
            margin:var(--s2) calc(var(--s3) * -1) 0;
            background:var(--space,#08080D);   /* 闇は時刻で移ろう（_sky_tokens）。写しを固定しない */
            border-top:1px solid var(--rule-faint)}
  /* 4-3（2026-07-28）：主動作は罫を太く（1.5px）・左右に間を持たせて面積で立たせる。
     色は足さない——階層は面積・字間・罫の太さだけで作る（主／従／危／ケアの4段）。 */
  .cast-send{border-bottom:1.5px solid var(--rule-act);color:var(--ink-1);
             font-size:14.5px;letter-spacing:0.4em;min-height:54px;
             padding:16px 16px 17px 20px}
  .cast-send:disabled{opacity:.35;cursor:default;border-color:var(--rule-faint)}
  /* 送る前の、唯一の確認（S6）。数も件数も出さない一行——いま決まっているものを、
     決めた順（どこへ／いろ／かたち）にそのまま並べるだけ。 */
  .cast-sum{margin:0;font-size:11px;letter-spacing:0.14em;color:var(--ink-4);
            text-align:center;word-break:keep-all;overflow-wrap:anywhere}
  /* とじるは柱の左上（S6）。的は44×44、罫は語の下にだけ引く（44px幅の下線にしない）。 */
  .cast-close{position:absolute;left:0;top:0;z-index:3;
              width:var(--touch);height:var(--touch);padding:0;
              display:flex;align-items:center;justify-content:center;
              background:none;border:none;color:var(--ink-3);
              transition:color .22s var(--ease),opacity .22s var(--ease)}
  .cast-close span{font-size:10.5px;letter-spacing:0.02em;padding-bottom:3px;
                   border-bottom:1px solid var(--rule-act)}
  .cast-close:hover{color:var(--ink-1)}
  .cast-close:active{opacity:.62}
  /* 常時の一行（S7）。この下に、罫の語「この投稿について」で開く二行がある */
  .cast-note{margin:0;font-size:11.5px;line-height:2.1;letter-spacing:var(--tr-body);
             color:var(--ink-4);text-align:center}
  .cast-more{font-size:11px;letter-spacing:0.2em;color:var(--ink-4);
             min-height:var(--touch);padding:11px 2px}
  .cast-about{display:flex;flex-direction:column;gap:6px;max-width:min(88vw,320px)}
  .cast-about[hidden]{display:none}
  .cast-about p{margin:0;font-size:11.5px;line-height:2.1;letter-spacing:var(--tr-body);
                color:var(--ink-4);text-align:center;word-break:keep-all;
                overflow-wrap:anywhere;text-wrap:pretty}
  .care-note{position:fixed;left:50%;bottom:calc(8dvh + var(--safe-b));transform:translate(-50%,8px);z-index:13;
             max-width:min(88vw,420px);padding:var(--s3) 22px;
             background:linear-gradient(90deg,rgba(179,143,111,.08),rgba(179,143,111,.03) 40%,rgba(179,143,111,0)),
                        rgba(15,15,22,.96);
             border-left:2px solid var(--thread);border-radius:var(--edge);
             box-shadow:0 0 0 1px rgba(250,248,243,.14);
             font-size:12.5px;line-height:2.2;letter-spacing:0.06em;color:var(--ink-1);
             opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .care-note.on{opacity:1;transform:translate(-50%,0)}
  .care-note p{margin:0 0 var(--s2)}
  .care-note a{color:var(--thread);text-decoration:underline;text-underline-offset:3px}
  .care-note .care-close{display:block;margin:var(--s1) 0 0 auto;min-height:var(--touch);
             color:var(--ink-3);font-size:11.5px;letter-spacing:0.2em;padding:12px 2px}
  @media (prefers-reduced-motion: reduce){ .care-note{transition:opacity .4s ease;transform:translate(-50%,0)} }
  /* ── 付箋（v2.2 §3）＝棚に残す瞬間に、読み手が自分の控えへ貼る小さな紙片。
     宙には出ない・書き手には返らない。だからここでは他人のことばへの入口にもしない
     （貼った本人の、自分の棚のための目印）。 ── */
  .fusen-row{display:flex;flex-wrap:wrap;gap:8px}
  .fusen{display:inline-flex;align-items:center;gap:6px;max-width:100%;
         background:rgba(250,248,243,.07);border:1px solid var(--rule);border-radius:1px;
         font-family:var(--font-ui);font-size:11.5px;letter-spacing:0.14em;color:var(--ink-3);
         padding:7px 10px;min-height:32px;cursor:pointer;
         transition:color .22s var(--ease),background .22s var(--ease)}
  .fusen:active{color:var(--ink-1);background:rgba(250,248,243,.12)}
  .fusen .x{color:var(--ink-4);font-size:13px;line-height:1}
  .hold .fusen{min-height:30px;padding:5px 9px}

  /* 棚に残したその場に開く、付箋の紙片。残すことは一押しで終わり——
     これは「そのままでもいい」続きなので、罫一本ぶんだけ静かに開く（Apple §16 簡潔さ）。 */
  /* 置かれる先（読む柱・受け止めた所）はどれも中身なりの幅なので、
     紙片の幅はここで決める（親に合わせると罫が数文字ぶんに縮む） */
  /* ── 保存したあとの、置き場所（2026-07-27）──────────────────────────
     保存は済んでいる＝ここは報せと、変えたい人のための細い道。だから主張しない。
     カードも錠剤も作らず、この世界の作法どおり「罫を一本ひいた語」だけで押せることを示す。 */
  .where-saved{width:min(280px,72vw);margin-top:10px;
               display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px}
  .where-lead{font-size:11.5px;letter-spacing:0.1em;color:var(--ink-3)}
  .where-change{background:none;border:none;border-bottom:1px solid var(--rule-act);
                font-family:var(--font-ui);font-size:11.5px;letter-spacing:0.1em;color:var(--ink-2);
                padding:9px 2px;min-height:var(--touch);
                transition:color .22s var(--ease),opacity .22s var(--ease)}
  .where-change:hover{color:var(--ink-1)}
  .where-change:active{opacity:.62}
  .where-pick{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:0 14px;padding-top:2px}
  .where-pick[hidden]{display:none}
  .where-opt{background:none;border:none;border-bottom:1px solid transparent;
             font-family:var(--font-ui);font-size:12px;letter-spacing:0.12em;color:var(--ink-3);
             padding:10px 2px;min-height:var(--touch);
             transition:color .22s var(--ease),border-color .22s var(--ease)}
  .where-opt:hover{color:var(--ink-1);border-bottom-color:var(--thread)}
  .where-opt:active{opacity:.62}
  input.where-new{flex:1 0 100%;background:none;border:none;border-bottom:1px solid var(--rule);
                  font-family:var(--font-ui);font-size:12px;letter-spacing:0.1em;color:var(--ink-2);
                  padding:10px 2px;min-height:var(--touch);outline:none}
  input.where-new::placeholder{color:var(--ink-4)}
  input.where-new:focus{border-bottom-color:var(--ink-4)}
  .fusen-pad{width:min(280px,72vw);margin-top:10px}
  #readFusen{width:min(280px,72vw)}
  .fusen-pad .fusen-row{margin-bottom:8px}
  .fusen-in{width:100%;background:none;border:none;border-bottom:1px solid var(--rule);
            font-family:var(--font-ui);font-size:12.5px;letter-spacing:0.1em;color:var(--ink-2);
            padding:11px 2px;min-height:var(--touch);outline:none}
  .fusen-in::placeholder{color:var(--ink-4)}
  .fusen-in:focus{border-bottom-color:var(--ink-4)}
  .fusen-sug{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
  /* ════ 読む柱・降りてきました・灯（mood.html から移植・2026-07-30）════ */
  /* 開く：メールの開封リンク（/open/<id>）から宙に着地したときだけ立ち上がる柱。
     書く柱（.cast）と同じ作法で、宙が暗くなり、本文がひと筋立つ。 */
  .read{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;
        background:rgba(8,8,13,.72);opacity:0;pointer-events:none;visibility:hidden;
        transition:opacity .6s ease,visibility 0s linear .6s}
  .read.on{opacity:1;pointer-events:auto;visibility:visible;
           transition:opacity .6s ease,visibility 0s}
  .read-inner{display:flex;flex-direction:column;align-items:center;gap:var(--s4);
              padding:var(--s3);max-width:92vw}
  .read-body{writing-mode:vertical-rl;max-height:min(62vh,520px);overflow:auto;
             color:var(--chalk);font-size:17px;line-height:2.4;letter-spacing:0.14em;
             white-space:pre-wrap;outline:none}
  .read-body.h{writing-mode:horizontal-tb;max-width:22em;max-height:62vh}
  .read-note{margin:0;font-size:11.5px;line-height:2;letter-spacing:0.14em;
             color:var(--ink-3);text-align:center;white-space:pre-line}
  .read-close{min-height:var(--touch);padding:13px 20px;font-size:12px;letter-spacing:0.24em}
  /* だれかのことばに結ぶ、静かな印（放った人には何も伝わらない）
     宙で漂うことばに触れた時の .hold-act と同じ形（同じ行いは同じ姿・Apple §16 familiarity） */
  .like-mark{display:inline-flex;align-items:center;gap:10px;min-height:var(--touch);
             background:none;border:none;color:var(--ink-3);font-family:var(--font-ui);
             font-size:var(--t-meta);letter-spacing:0.16em;padding:11px 4px;
             transition:color .22s var(--ease),opacity .22s var(--ease)}
  .like-mark:hover{color:var(--ink-1)}
  .like-mark:active{opacity:.62}
  .like-mark.on{color:var(--ink-1)}
  /* display指定があると[hidden]のUA既定を上書きしてしまうので明示する
     （印は他人のことばにだけ。自分の帰ってきたことばには出さない） */
  .like-mark[hidden]{display:none}
  /* ── 宙のすみで待っている、だれかのことば（棚を畳んだので宙側へ・v11.1）──
     数も、だれのものかも言わない。ただ「降りてきた」ことだけが灯る。 */
  /* 2026-08-02：頭の帯に「書く」としるしが並んだので、一段下げる（重なりを避ける） */
  .arrivals{position:fixed;right:calc(20px + var(--safe-r));top:calc(74px + var(--safe-t));z-index:11;
            display:flex;flex-direction:column;
            align-items:flex-end;gap:2px;transition:opacity .34s var(--ease),top .34s var(--ease)}
  /* 栞が開いている間は、同じ場所にいる「降りてきました」は退く（v13） */
  .arrivals.away{opacity:0;pointer-events:none}
  /* 部屋の中では、この帯（top:52px）は部屋の名前と部屋の操作のものになる。
     「降りてきました」を同じ高さに置くと、二つの押せるものが重なる——狭い画面では
     実際に「この部屋を消す」と重なって、どちらを押したのか分からなかった。一段下げる。 */
  body.in-room .arrivals{top:calc(104px + var(--safe-t))}
  .arrival{display:flex;align-items:center;gap:10px;background:none;border:none;
           font-family:var(--font-ui);font-size:var(--t-meta);letter-spacing:var(--tr-body);
           min-height:var(--touch);padding:12px 2px;
           color:var(--ink-3);transition:color .22s var(--ease),opacity .22s var(--ease);
           text-shadow:0 0 14px rgba(8,8,13,.95)}
  .arrival:hover{color:var(--ink-1)}
  .arrival:active{opacity:.62}
  .arrival .seal{width:9px;height:9px;border-radius:50%;background:var(--thread);
                 box-shadow:0 0 12px currentColor;animation:sealPulse 4.5s ease-in-out infinite}
  /* 開封済みの控え。クラス名は .read を避ける（読む柱 .read と衝突するため） */
  .arrival.done{color:var(--ink-4)}
  .arrival.done .seal{background:none;box-shadow:none;border:1px solid var(--rule);animation:none}
  @keyframes sealPulse{0%,100%{opacity:.55}50%{opacity:1}}
  @media (prefers-reduced-motion: reduce){ .arrival .seal{animation:none} }
  /* ── 灯（宙v1 §4.2）──
     いま、自分以外の誰かが宙のことばに触れた——その気配だけの、かすかな明滅。
     位置は宙の下のすみ。数字も文字も持たない（数えた瞬間に灯でなくなる）。 */
  /* 灯は帯の上・左端26px（案A）。帯の中に入れず、帯のすぐ上に浮かせる——
     これは操作ではなく気配なので、操作の列に並べない。 */
  .lantern{position:absolute;left:calc(26px + var(--safe-l));bottom:calc(100% + 10px);
           width:7px;height:7px;border-radius:50%;
           background:var(--thread,#c9b98a);opacity:0;pointer-events:none;z-index:9;
           box-shadow:0 0 16px 4px rgba(222,205,160,.35);
           transition:opacity 2.6s var(--ease,ease)}
  .lantern.on{opacity:.6}
  /* 「いま、この部屋にだれか居る」（2026-07-29 フェーズ7）。
     触れた合図（.on = .6・7秒で引く）より弱く、そして引かない。誰も居なくなれば
     次の周回で静かに消える。数は出さない——一人でも五人でも、この明るさは同じ。
     部屋の灯（.room.lit .fire）と同じ 6.5s の呼吸に合わせて、宙ぜんぶで
     ひとつの息づかいに見えるようにする。 */
  .lantern.near{opacity:.30;animation:lanternNear 6.5s var(--ease,ease-in-out) infinite}
  .lantern.near.on{opacity:.6}          /* 触れた合図が来たら、そちらが勝つ */
  @keyframes lanternNear{0%,100%{transform:scale(1);opacity:.24}
                         50%{transform:scale(1.18);opacity:.38}}
  @media (prefers-reduced-motion: reduce){ .lantern.near{animation:none;opacity:.30} }
  /* 3秒を超える「間」のもうひとつの表現（v2追補 §1）：一度だけの深い呼吸。
     書き手がそこで長く止まった、ということだけが、時間を使わずに伝わる */
  .lantern.deep{opacity:.55;animation:lanternDeep 4.2s var(--ease,ease-in-out) 1}
  @keyframes lanternDeep{0%,100%{transform:scale(1)}42%{transform:scale(1.6)}}
  @media (prefers-reduced-motion: reduce){ .lantern{transition:opacity 1s ease} .lantern.deep{animation:none} }
  /* 灯の気配（?rooms=1）：気配のある島の炎が、明るくなって呼吸する
     （2026-08-05・旧宙の部屋一覧の fireBreath へ戻した） */
  .isl.lit .fire{opacity:.95;animation:fireBreath 6.5s var(--ease,ease-in-out) infinite}
  @keyframes fireBreath{0%,100%{transform:translate(-50%,-50%) scale(1)}
                        50%{transform:translate(-50%,-50%) scale(1.16)}}
  /* 息をするのは遠景だけ（2026-07-31 夜）。近景の止めと薄さは名の節にまとめた
     （body.near .isl.lit .fire——詳細度の都合で lit の上書きと同居させている）。 */
  @media (prefers-reduced-motion: reduce){ .isl.lit .fire{animation:none} }
  /* 手がふれているあいだ、気配は息を止める（2026-08-03 カクツキ）。
     つまむ・ひきずるの最中は、同じフレームで宙ぜんぶを描き直す仕事と鉢合わせる
     ——一秒に何度も起きる「重なり」がガクツキそのものだった。手が離れれば戻る
     （0.7秒後）。息が止まっていることに、動かしている手は気づかない。 */
  body.gesturing .isl.lit .fire,
  body.gesturing .lantern.near{animation-play-state:paused}
  /* ── 倍率が動いている間だけ、ぼけた塗りを畳む（2026-08-03・案B）────────────
     ひきずり（translate）は合成の上で済むので、見え方は何も変えない。変えるのは
     **寄り引きの最中だけ**——倍率が変わるフレームは、どのみち宙ぜんぶを描き直す
     ことになっていて、そこに一枚ごとのぼかしが乗ると桁が変わる。
       ・字の光暈（text-shadow 16px）… 数百枚ぶんの、ぼかした字の二度塗り
       ・紙の影（box-shadow）… ぼかしは blur と同じ計算で、面積ぶんの塗りが要る
     どちらも寄っている最中の0.7秒だけ引っ込み、手を止めれば戻る。倍率が動いて
     いる間は画がそもそも動いているので、光暈の出入りは目に留まらない。
     **島の灯（放射グラデーション）はここでは消さない**：遠景で島を見分けている
     唯一の色で、これを落とすと寄るたびに宙が暗くなる。呼吸を止めるところまで。 */
  /* 受け止めている一枚（.held）の縁だけは残す——それは影ではなく、いま手の中に
     あることの合図で、倍率が動いても消えてはいけない。 */
  /* ── 遠景で寄り引きしている間だけ、字は退く（2026-08-03・遠景のカクツキ）────
     実測：遠景では間引きが一枚も効かない（784片ぜんぶ・島も21ぜんぶが画面に載る）。
     つまり倍率が動く一フレームごとに、**784枚の縦組みのテキスト**を新しい寸法で
     ラスタライズし直している——遠景の字は3px前後で、字形はもう誰にも読めない。
     読めない字のために、いちばん詰まっているフレームで784枚を組み直す理由はない。
     消すのは「遠景」かつ「倍率が動いている0.7秒」だけ：
       ・ひきずり（gesturing）では消さない ── 平行移動は合成で済み、塗り直しが無い
       ・近景・読む面では消さない ── そこでは字が主役
     手を止めれば戻る。動いている間は画がそもそも流れているので、出入りは目に留まらない。
     .isl-w ごと畳むので、cullWords が一枚ずつ書いた visibility とは喧嘩しない
     （子は '' か 'hidden' しか書かない＝親の hidden を覆さない）。 */
  /* transition:none が要る（2026-08-05）。遠景の字を畳む規則（body.far …）に
     visibility の .8s 遅延を付けた日から、この「即時に畳む」が同じ .8s 待たされて
     いた——far を跨いだ直後のいちばん詰まっているフレームで、塞いだはずの
     784枚のラスタライズがそのまま通っていた。ここは待たない。
     選び方を far の規則と同じ形まで伸ばしてあるのは詳細度のため（body.far …
     .isl:not(.sheet) .isl-w が (0,4,1)。素の body.far.zooming .isl-w では負ける）。 */
  body.far.zooming .isl:not(.sheet) .isl-w{visibility:hidden;transition:none}
  body.far.zooming .isl-w{visibility:hidden;transition:none}
  body.zooming .w:not(.held){text-shadow:none!important}
  body.zooming .isl.sheet .w:not(.held){box-shadow:none}
  body.zooming .gw:not(.held){box-shadow:none}
  /* ── 狭い画面の頭の帯（2026-08-02）──────────────────────────────
     名・探す・書く・しるしの四つは、560px を切ると横に並びきらない。落とすのは
     名の添え（TAYORI）と「書く」の一語＝しるしと符だけが残る。探すの器は縮めない
     ——この帯で唯一、字を入れる場所なので、いちばん最後まで幅を持つ。 */
  @media (max-width:560px){
    header{gap:var(--s1);padding-left:calc(14px + var(--safe-l));padding-right:calc(12px + var(--safe-r))}
    .brand{flex:0 0 auto;font-size:13px;letter-spacing:.12em}
    .brand small{display:none}
    .top-mid{flex:1 1 auto}
    .top-right{flex:0 0 auto}
    .seek{height:38px;padding-left:12px}
    .cast-btn{height:38px;padding:0 12px;font-size:13px;letter-spacing:.1em}
    /* 携帯では、戸の中に巻き取る面を**二つ**作らない（2026-08-07 Kosei）。
       ジャンルの一覧（216px の窓）と板そのもの（78dvh）が入れ子に巻き取ると、
       内側の端に着いたところで overscroll-behavior:contain が外側へ渡すのを断つ
       ＝一覧の途中で指が効かなくなる。狭い画面では窓をやめ、板ごと送らせる。 */
    .menu-rooms{max-height:none;overflow:visible}
  }
  @media (max-width:430px){
    .seek{padding-left:10px;gap:6px}
    .cast-btn{padding:0 11px;gap:4px}
  }
  /* いちばん狭い画面（340px 未満）でだけ名を畳む。探すの器の幅を守るため */
  @media (max-width:340px){
    .brand{display:none}
  }