@import url("../assets/base.css");
/* 案07 sashimi OS：淡い紫の机に、ドット絵の窓とドック。起動 → ログイン（カーソルが自動で押す）→ 作品の窓が開いたデスクトップ。
   窓は1つだけで、位置と大きさは決まっている。ドックで中身（作品・プロフィール・ご依頼）を替え、作品の詳細も同じ窓の中で開く。
   色の決まり：ピンク＝窓のタイトルバー・今の中身（ドックの押し込まれたキー）・選んでいるもの（木の行・最後に見た作品）。
   蛍光イエロー＝カーソル周り（hover の反転の字・カーソル・起動の進み具合）と NEW。
   押せるものは「黒い枠＋右下の影」の形。hover で黒地に黄の字へ反転し、押すと影の分だけ沈む。
   ドット絵の部品（アイコン・カーソル・ロゴ）は 1 ドット＝整数 px で拡大する（ぼかさない）。 */
:root{
--desk:#e9e2ff;--dot:#d3c6ff;--ink:#1b1430;--paper:#fff;--paper-2:#f5f1ff;--muted:#6b5fa0;
--pink:#ff2e88;--y:#e8ff00;--grey:#d0d0d0;
--f:"DotGothic16",ui-monospace,monospace;
--b:3px;--sh:6px 6px 0 var(--ink);--key:3px 3px 0 var(--ink);
/* PC の配置：下の帯（名前・ドック）の高さ、窓の幅、壁紙の左端 */
--base:136px;--ww:clamp(620px,60vw,960px);--wall-l:calc(var(--ww) + 80px);--logo:clamp(56px,6vw,104px);
/* スマホ・タブレット：上の帯（名前）とドックの高さ */
--head:72px;--dock-h:87px;
--dither:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 0 0/8px 8px;
--step:polygon(0 32px,16px 32px,16px 16px,32px 16px,32px 0,calc(100% - 32px) 0,calc(100% - 32px) 16px,calc(100% - 16px) 16px,calc(100% - 16px) 32px,100% 32px,100% calc(100% - 32px),calc(100% - 16px) calc(100% - 32px),calc(100% - 16px) calc(100% - 16px),calc(100% - 32px) calc(100% - 16px),calc(100% - 32px) 100%,32px 100%,32px calc(100% - 16px),16px calc(100% - 16px),16px calc(100% - 32px),0 calc(100% - 32px));
/* ドット絵の部品：1 マス＝1 ドットの絵を crispEdges の SVG にしたもの（飾りの形だけ。作品の絵ではない） */
/* folder 14x11 */ --i-folder:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' shape-rendering='crispEdges'><path fill='%231b1430' d='M1 0h5v1h-5zM0 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM7 2h6v1h-6zM0 3h1v1h-1zM13 3h1v1h-1zM0 4h14v1h-14zM0 5h1v1h-1zM13 5h1v1h-1zM0 6h1v1h-1zM13 6h1v1h-1zM0 7h1v1h-1zM13 7h1v1h-1zM0 8h1v1h-1zM13 8h1v1h-1zM0 9h1v1h-1zM13 9h1v1h-1zM0 10h14v1h-14z'/><path fill='%23c4b4ff' d='M1 1h5v1h-5zM1 2h6v1h-6zM1 3h12v1h-12z'/><path fill='%238b6bff' d='M1 5h12v1h-12zM1 6h12v1h-12zM1 7h12v1h-12zM1 8h12v1h-12zM1 9h12v1h-12z'/></svg>");
/* text 12x14 */ --i-text:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14' shape-rendering='crispEdges'><path fill='%231b1430' d='M0 0h9v1h-9zM0 1h1v1h-1zM8 1h2v1h-2zM0 2h1v1h-1zM8 2h1v1h-1zM10 2h1v1h-1zM0 3h1v1h-1zM8 3h4v1h-4zM0 4h1v1h-1zM11 4h1v1h-1zM0 5h1v1h-1zM11 5h1v1h-1zM0 6h1v1h-1zM11 6h1v1h-1zM0 7h1v1h-1zM11 7h1v1h-1zM0 8h1v1h-1zM11 8h1v1h-1zM0 9h1v1h-1zM11 9h1v1h-1zM0 10h1v1h-1zM11 10h1v1h-1zM0 11h1v1h-1zM11 11h1v1h-1zM0 12h1v1h-1zM11 12h1v1h-1zM0 13h12v1h-12z'/><path fill='%23ffffff' d='M1 1h7v1h-7zM1 2h7v1h-7zM9 2h1v1h-1zM1 3h7v1h-7zM1 4h10v1h-10zM1 5h1v1h-1zM10 5h1v1h-1zM1 6h10v1h-10zM1 7h1v1h-1zM10 7h1v1h-1zM1 8h10v1h-10zM1 9h1v1h-1zM7 9h4v1h-4zM1 10h10v1h-10zM1 11h1v1h-1zM10 11h1v1h-1zM1 12h10v1h-10z'/><path fill='%238d84a8' d='M2 5h8v1h-8zM2 7h8v1h-8zM2 9h5v1h-5zM2 11h8v1h-8z'/></svg>");
/* mail 14x10 */ --i-mail:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' shape-rendering='crispEdges'><path fill='%231b1430' d='M0 0h14v1h-14zM0 1h2v1h-2zM12 1h2v1h-2zM0 2h1v1h-1zM2 2h1v1h-1zM11 2h1v1h-1zM13 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM10 3h1v1h-1zM13 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM9 4h1v1h-1zM13 4h1v1h-1zM0 5h1v1h-1zM5 5h4v1h-4zM13 5h1v1h-1zM0 6h1v1h-1zM13 6h1v1h-1zM0 7h1v1h-1zM13 7h1v1h-1zM0 8h1v1h-1zM13 8h1v1h-1zM0 9h14v1h-14z'/><path fill='%235fd3ff' d='M2 1h10v1h-10zM1 2h1v1h-1zM3 2h8v1h-8zM12 2h1v1h-1zM1 3h2v1h-2zM4 3h6v1h-6zM11 3h2v1h-2zM1 4h3v1h-3zM5 4h4v1h-4zM10 4h3v1h-3zM1 5h4v1h-4zM9 5h4v1h-4zM1 6h12v1h-12zM1 7h12v1h-12zM1 8h12v1h-12z'/></svg>");
/* image 12x10 */ --i-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' shape-rendering='crispEdges'><path fill='%231b1430' d='M0 0h12v1h-12zM0 1h1v1h-1zM11 1h1v1h-1zM0 2h1v1h-1zM11 2h1v1h-1zM0 3h1v1h-1zM11 3h1v1h-1zM0 4h1v1h-1zM11 4h1v1h-1zM0 5h1v1h-1zM11 5h1v1h-1zM0 6h1v1h-1zM11 6h1v1h-1zM0 7h1v1h-1zM11 7h1v1h-1zM0 8h1v1h-1zM11 8h1v1h-1zM0 9h12v1h-12z'/><path fill='%235fd3ff' d='M1 1h10v1h-10zM1 2h7v1h-7zM10 2h1v1h-1zM1 3h7v1h-7zM10 3h1v1h-1zM1 4h4v1h-4zM6 4h5v1h-5zM1 5h3v1h-3zM7 5h4v1h-4zM1 6h2v1h-2zM8 6h1v1h-1zM10 6h1v1h-1zM1 7h1v1h-1z'/><path fill='%23ffffff' d='M8 2h2v1h-2zM8 3h2v1h-2z'/><path fill='%237af0c2' d='M5 4h1v1h-1zM4 5h3v1h-3zM3 6h5v1h-5zM9 6h1v1h-1zM2 7h9v1h-9zM1 8h10v1h-10z'/></svg>");
/* close 7x7 */ --i-close:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7' shape-rendering='crispEdges'><path fill='%231b1430' d='M0 0h2v1h-2zM5 0h2v1h-2zM0 1h3v1h-3zM4 1h3v1h-3zM1 2h5v1h-5zM2 3h3v1h-3zM1 4h5v1h-5zM0 5h3v1h-3zM4 5h3v1h-3zM0 6h2v1h-2zM5 6h2v1h-2z'/></svg>");
/* prev 5x9 */ --i-prev:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='5' height='9' viewBox='0 0 5 9' shape-rendering='crispEdges'><path fill='%231b1430' d='M4 0h1v1h-1zM3 1h2v1h-2zM2 2h3v1h-3zM1 3h4v1h-4zM0 4h5v1h-5zM1 5h4v1h-4zM2 6h3v1h-3zM3 7h2v1h-2zM4 8h1v1h-1z'/></svg>");
/* next 5x9 */ --i-next:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='5' height='9' viewBox='0 0 5 9' shape-rendering='crispEdges'><path fill='%231b1430' d='M0 0h1v1h-1zM0 1h2v1h-2zM0 2h3v1h-3zM0 3h4v1h-4zM0 4h5v1h-5zM0 5h4v1h-4zM0 6h3v1h-3zM0 7h2v1h-2zM0 8h1v1h-1z'/></svg>");
/* back 7x7 */ --i-back:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7' shape-rendering='crispEdges'><path fill='%231b1430' d='M3 0h1v1h-1zM2 1h2v1h-2zM1 2h6v1h-6zM0 3h7v1h-7zM1 4h6v1h-6zM2 5h2v1h-2zM3 6h1v1h-1z'/></svg>");
/* down 9x5 */ --i-down:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5' shape-rendering='crispEdges'><path fill='%231b1430' d='M0 0h9v1h-9zM1 1h7v1h-7zM2 2h5v1h-5zM3 3h3v1h-3zM4 4h1v1h-1z'/></svg>");
/* cursor 12x19 */ --i-cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='38' viewBox='0 0 12 19' shape-rendering='crispEdges'><path fill='%231b1430' d='M0 0h1v1h-1zM0 1h2v1h-2zM0 2h1v1h-1zM2 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM0 5h1v1h-1zM5 5h1v1h-1zM0 6h1v1h-1zM6 6h1v1h-1zM0 7h1v1h-1zM7 7h1v1h-1zM0 8h1v1h-1zM8 8h1v1h-1zM0 9h1v1h-1zM9 9h1v1h-1zM0 10h1v1h-1zM10 10h1v1h-1zM0 11h1v1h-1zM7 11h5v1h-5zM0 12h1v1h-1zM4 12h1v1h-1zM7 12h1v1h-1zM0 13h1v1h-1zM3 13h2v1h-2zM7 13h1v1h-1zM0 14h1v1h-1zM2 14h1v1h-1zM5 14h1v1h-1zM8 14h1v1h-1zM0 15h2v1h-2zM5 15h1v1h-1zM8 15h1v1h-1zM0 16h1v1h-1zM6 16h1v1h-1zM9 16h1v1h-1zM6 17h1v1h-1zM9 17h1v1h-1zM7 18h2v1h-2z'/><path fill='%23e8ff00' d='M1 2h1v1h-1zM1 3h2v1h-2zM1 4h3v1h-3zM1 5h4v1h-4zM1 6h5v1h-5zM1 7h6v1h-6zM1 8h7v1h-7zM1 9h8v1h-8zM1 10h9v1h-9zM1 11h6v1h-6zM1 12h3v1h-3zM5 12h2v1h-2zM1 13h2v1h-2zM5 13h2v1h-2zM1 14h1v1h-1zM6 14h2v1h-2zM6 15h2v1h-2zM7 16h2v1h-2zM7 17h2v1h-2z'/></svg>");
/* sashimi 16x10 */ --i-sashimi:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' shape-rendering='crispEdges'><path fill='%231b1430' d='M4 0h8v1h-8zM2 1h2v1h-2zM12 1h2v1h-2zM1 2h1v1h-1zM14 2h1v1h-1zM0 3h1v1h-1zM15 3h1v1h-1zM0 4h1v1h-1zM15 4h1v1h-1zM0 5h1v1h-1zM15 5h1v1h-1zM0 6h1v1h-1zM15 6h1v1h-1zM1 7h1v1h-1zM14 7h1v1h-1zM2 8h2v1h-2zM12 8h2v1h-2zM4 9h8v1h-8z'/><path fill='%23ff2e88' d='M4 1h3v1h-3zM9 1h3v1h-3zM2 2h3v1h-3zM7 2h3v1h-3zM12 2h2v1h-2zM1 3h3v1h-3zM6 3h3v1h-3zM11 3h4v1h-4zM1 4h2v1h-2zM5 4h3v1h-3zM10 4h3v1h-3zM1 5h1v1h-1zM4 5h3v1h-3zM9 5h3v1h-3zM14 5h1v1h-1zM3 6h3v1h-3zM8 6h3v1h-3zM13 6h2v1h-2zM2 7h3v1h-3zM7 7h3v1h-3zM12 7h2v1h-2zM4 8h8v1h-8z'/><path fill='%23ffffff' d='M7 1h2v1h-2zM5 2h2v1h-2zM10 2h2v1h-2zM4 3h2v1h-2zM9 3h2v1h-2zM3 4h2v1h-2zM8 4h2v1h-2zM13 4h2v1h-2zM2 5h2v1h-2zM7 5h2v1h-2zM12 5h2v1h-2zM1 6h2v1h-2zM6 6h2v1h-2zM11 6h2v1h-2zM5 7h2v1h-2zM10 7h2v1h-2z'/></svg>");
}
html{height:100%}
body{min-height:100%;background:var(--desk) conic-gradient(at 2px 2px,transparent 75%,var(--dot) 0) 0 0/16px 16px;color:var(--ink);font:400 16px/1.8 var(--f);cursor:var(--i-cursor) 0 0,auto}
button,a{cursor:pointer}
button{font-family:var(--f)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
::selection{background:var(--y);color:var(--ink)}

/* ---------- 押せる形（ボタン・リンクのキー）。hover の反転はマウスのときだけ（タッチで押した後に残らない） ---------- */
.intro-skip,.dock__btn,.dock__sns a,.bar__sns a,.bar__back a,.vw__back,.vw__step,.mail__send{border:var(--b) solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:var(--key);text-decoration:none}
@media (hover:hover){
:is(.intro-skip,.dock__btn,.dock__sns a,.bar__sns a,.bar__back a,.vw__back,.vw__step,.mail__send):hover{background:var(--ink);color:var(--y)}
/* SNS のロゴは、黒地に反転したときだけ白（各社の決まり：X・Instagram は黒か白、pixiv は明るい地なら青・暗い地なら白） */
:is(.dock__sns a,.bar__sns a):hover{--sns-mono:#fff;--sns-pixiv:#fff}
}
:is(.intro-skip,.dock__btn,.dock__sns a,.bar__sns a,.bar__back a,.vw__back,.vw__step,.mail__send):active{translate:3px 3px;box-shadow:none}
/* 一色のドット絵の記号（×・矢印）は字の色で塗る。反転すると黄になる */
.win__close::after,.vw__step::before,.vw__back::before,.bar__back a::before,.ex__toggle::after,.win__crumb+.win__crumb::before{content:"";background:currentColor;-webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat}

/* ---------- 起動画面（1秒）→ ログイン（カーソルが顔へ動いて押す）。押せばすぐデスクトップへ ---------- */
.boot,.login,.intro-skip{display:none}
[data-start="boot"] .boot{display:grid}
[data-start] .login{display:grid}
.boot{position:fixed;inset:0;z-index:2100;place-content:center;justify-items:center;gap:20px;background:var(--ink) conic-gradient(at 2px 2px,transparent 75%,#2e2450 0) 0 0/16px 16px;color:var(--paper)}
.boot__mark{width:96px;height:60px;background:var(--i-sashimi) 0 0/96px 60px no-repeat}
.boot__name{margin:0;font-size:40px;line-height:1.2}
.boot__bar{display:block;width:252px;padding:3px;border:var(--b) solid var(--paper)}
.boot__bar span{display:block;height:18px;background:repeating-linear-gradient(90deg,var(--y) 0 12px,transparent 12px 16px);animation:boot-fill .9s steps(15) both}
@keyframes boot-fill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
[data-start] .intro-skip{display:block;position:fixed;right:24px;bottom:24px;z-index:2200;min-height:44px;padding:0 20px;font-size:16px;line-height:1}
[data-start="boot"] .intro-skip:focus-visible{outline-color:var(--y)}
.login.is-leaving~.intro-skip{opacity:0}

.login{position:fixed;inset:0;z-index:2000;place-items:center;background:var(--desk) conic-gradient(at 2px 2px,transparent 75%,var(--dot) 0) 0 0/16px 16px}
.login__user{position:relative;display:grid;justify-items:center;gap:16px;padding:16px}
.login__face{display:block;width:224px;height:224px;overflow:hidden;background:var(--paper);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
/* 寄り：横顔の肖像（頭と肩）を正方形に。顔が絵柄の核なので、最初に目を合わせる場所に置く */
.login__face img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,40%)}
.login__name{padding:4px 16px;background:var(--paper);border:var(--b) solid var(--ink);font-size:28px;line-height:1.2}
/* 自動のカーソルが届くと黄になり、押すと影の分だけ沈む */
.login__user:hover :is(.login__face,.login__name),.login.is-hover :is(.login__face,.login__name){background:var(--y)}
.login.is-press .login__face{translate:4px 4px;box-shadow:4px 4px 0 var(--ink)}
/* ドット絵のカーソル（3倍）。先端が顔の中心に来る。右下から 8 コマで動く */
.login__cursor{--cx:min(36vw,440px);--cy:min(32vh,300px);position:absolute;left:50%;top:128px;width:36px;height:57px;background:var(--i-cursor) 0 0/36px 57px no-repeat;translate:var(--cx) var(--cy)}
[data-start="login"] .login__cursor{animation:cursor-in .8s steps(8) both}
@keyframes cursor-in{from{translate:var(--cx) var(--cy)}to{translate:0 0}}
/* 抜けるとき：網点を 75%→50%→25% と減らして、後ろのデスクトップを見せる */
.login.is-leaving{animation:login-out .32s both}
.login.is-leaving .login__user{visibility:hidden}
@keyframes login-out{
0%,24%{background:conic-gradient(at 4px 4px,var(--desk) 75%,transparent 0) 0 0/8px 8px}
25%,49%{background:repeating-conic-gradient(var(--desk) 0 25%,transparent 0 50%) 0 0/8px 8px}
50%,74%{background:conic-gradient(at 4px 4px,transparent 75%,var(--desk) 0) 0 0/8px 8px}
75%,100%{background:transparent}
}

/* ---------- デスクトップ（画面ぴったり、ページは動かない）。PC：左に窓、右に壁紙、下の帯に名前とドック ---------- */
.os{position:fixed;inset:0;overflow:hidden}
.desk{position:absolute;inset:0}
/* 壁紙＝キービジュアル。窓と下の帯に重ならない右側だけに置く（上下は窓とそろえる）。窓を閉じると机いっぱいに広がる */
.wall{position:absolute;left:var(--wall-l);right:-16px;top:24px;bottom:var(--base)}
.os[data-view="desk"] .wall{left:32px}
.wall__shade,.wall__frame{position:absolute;inset:0;clip-path:var(--step)}
.wall__shade{translate:12px 12px;background:var(--dither)}
.wall__frame{overflow:hidden;background:var(--grey)}
.wall__bg{position:absolute;inset:-24px;width:calc(100% + 48px);max-width:none;height:calc(100% + 48px);object-fit:cover}
/* 背景とキャラの2層は枠の中だけ（枠の外の窓やドックに絵が掛からない）。動きは layers.js の視差だけ
   寄り：枠の高さの2倍。顔（--fx,--fy）を枠の左右45%・上から37%に置き、腰から下は枠の外 */
.wall__chara{position:absolute;left:45%;top:37%;width:auto;max-width:none;height:200%;translate:calc(var(--fx,50%) * -1) calc(var(--fy,30%) * -1)}

/* 下の帯：名前（ロゴ）→ ドック → 比較に戻る。見る場所は「上＝中身、下＝操作」の2つだけ */
.bar{position:absolute;z-index:30;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:24px;padding:0 24px 16px 32px;pointer-events:none}
.bar>*{pointer-events:auto}
.bar__name{position:relative;z-index:5;flex:none;margin:0 0 8px;font-size:var(--logo);font-weight:400;line-height:.9;color:var(--paper);
text-shadow:3px 0 var(--ink),-3px 0 var(--ink),0 3px var(--ink),0 -3px var(--ink),3px 3px var(--ink),-3px -3px var(--ink),3px -3px var(--ink),-3px 3px var(--ink),9px 9px var(--pink),12px 12px var(--ink)}
.bar__sns{display:none}
.bar__back{position:relative;z-index:900;flex:none;margin:0 0 8px auto;white-space:nowrap}
.bar__back a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;font-size:14px;line-height:1}
.bar__back a::before{--m:var(--i-back);width:14px;height:14px}

/* ---------- ドック（入口はここだけ：窓の中身｜SNS）。今の中身はピンクで押し込まれたキー ---------- */
.dock{position:relative;z-index:900;flex:none;display:flex;align-items:center;gap:12px;padding:12px;background:var(--paper);border:var(--b) solid var(--ink);box-shadow:var(--sh)}
.dock ul{display:flex;gap:8px}
.dock__btn{display:grid;justify-items:center;align-content:center;gap:4px;min-width:80px;height:72px;padding:0 8px;font-size:13px;line-height:1.2;white-space:nowrap}
.dock__ico{display:block;width:42px;height:36px;background:no-repeat 50% 100%}
.dock__ico--folder{background-image:var(--i-folder);background-size:42px 33px}
.dock__ico--text{background-image:var(--i-text);background-size:30px 35px}
.dock__ico--mail{background-image:var(--i-mail);background-size:42px 30px}
.dock__btn[aria-current="page"],.dock__btn[aria-current="page"]:hover{background:var(--pink);color:var(--ink);translate:3px 3px;box-shadow:none}
.dock__sns{padding-left:12px;border-left:var(--b) dashed var(--ink)}
.dock__sns a{width:64px;height:72px}
.dock__sns .sns__icon{width:28px;height:28px}

/* ---------- 窓（1つだけ。位置と大きさは決まっていて、ドックで中身を替える） ---------- */
.win{position:fixed;z-index:20;left:32px;top:24px;width:var(--ww);height:calc(100svh - var(--base) - 24px);display:flex;flex-direction:column;background:var(--paper);border:var(--b) solid var(--ink);box-shadow:var(--sh)}
.win:not([hidden]){animation:win-in .15s steps(3) both}
@keyframes win-in{from{opacity:0;scale:.94}}
/* 窓や詳細そのものにフォーカスを移したときは枠を出さない（中のボタンには枠が出る） */
.win:focus,.vw:focus{outline:none}
/* タイトルバー：ピンクに黒の横縞。題は「作品 ▶ お仕事 ▶ MVイラスト」の道筋で、今どこを見ているかを示す */
.win__bar{flex:none;display:flex;align-items:stretch;min-height:48px;background:var(--pink) repeating-linear-gradient(var(--ink) 0 2px,transparent 0 6px) 0 50%/100% 22px no-repeat;border-bottom:var(--b) solid var(--ink)}
.win__title{display:flex;align-items:center;gap:8px;min-width:0;margin:0;padding:0 12px;background:var(--pink);font-size:16px;font-weight:400;line-height:1.2;white-space:nowrap}
.win__path{display:flex;align-items:center;min-width:0;overflow:hidden}
.win__crumb{flex:0 4 auto;min-width:2em;overflow:hidden;text-overflow:ellipsis}
.win__crumb:last-child{flex-shrink:1;min-width:0}
.win__crumb+.win__crumb::before{--m:var(--i-next);display:inline-block;width:5px;height:9px;margin:0 8px 0 4px;vertical-align:1px}
/* 閉じる：押せるキーの形（48px 四方の中に 32px のキー）。閉じると壁紙が机いっぱいに見える */
.win__close{position:relative;flex:none;width:48px;margin-left:auto;padding:0;border:0;background:var(--pink);color:var(--ink)}
.win__close::before{content:"";position:absolute;inset:8px;background:var(--paper);border:var(--b) solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.win__close::after{--m:var(--i-close);position:absolute;left:17px;top:17px;width:14px;height:14px}
@media (hover:hover){
.win__close:hover{color:var(--y)}
.win__close:hover::before{background:var(--ink)}
}
.win__close:active::before,.win__close:active::after{translate:2px 2px}
.win__close:active::before{box-shadow:none}
.win__close:focus-visible{outline-offset:-4px}
.win__ico{flex:none;display:block;width:28px;height:22px;background:var(--i-folder) 50% 50%/28px 22px no-repeat}
.win__ico[data-ico="text"]{width:24px;height:28px;background-image:var(--i-text);background-size:24px 28px}
.win__ico[data-ico="mail"]{height:20px;background-image:var(--i-mail);background-size:28px 20px}
.win__ico[data-ico="image"]{width:24px;height:20px;background-image:var(--i-image);background-size:24px 20px}
.win__body{flex:1;min-height:0;display:flex;flex-direction:column}
.pane{flex:1;min-height:0}
/* 中身が替わったことは、2コマの描き直しで見せる */
.pane:not([hidden]),.ex__files:not([hidden]),.vw:not([hidden]){animation:redraw .12s steps(2) both}
@keyframes redraw{from{opacity:0}}

/* エクスプローラー（作品）：左に分類の木、右にファイル（作品）。詳細は右の欄で開く */
.ex{display:grid;grid-template-columns:248px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.ex__toggle{display:none}
.ex__tree{min-height:0;overflow-x:hidden;overflow-y:auto;background:var(--paper-2);border-right:var(--b) solid var(--ink);scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
/* 木：フォルダの行。選んでいる行はピンク、hover は黒地に黄の反転。枝は点線（1行 44px、字が長ければ折り返す） */
.tree{padding:12px 8px 24px}
.tree li{position:relative}
.tree button{display:flex;align-items:flex-start;gap:8px;width:100%;min-height:44px;padding:11px 8px;border:0;background:none;color:var(--ink);font-size:14px;line-height:22px;text-align:left;overflow-wrap:anywhere}
.tree button::before{content:"";flex:none;width:28px;height:22px;background:var(--i-folder) 0 0/28px 22px no-repeat}
@media (hover:hover){
.tree button:hover{background:var(--ink);color:var(--y)}
}
.tree button:active{translate:0 2px}
.tree .is-sel,.tree .is-sel:hover{background:var(--pink);color:var(--ink)}
.tree button:focus-visible{outline-offset:-3px}
.tree__sub{margin-left:22px;padding-left:12px}
.tree__sub>li::before,.tree__sub>li::after{content:"";position:absolute;left:-12px}
.tree__sub>li::before{top:0;bottom:0;width:2px;background:linear-gradient(var(--ink) 50%,transparent 0) 0 0/2px 4px}
.tree__sub>li:first-child::before{top:-12px}
.tree__sub>li:last-child::before{bottom:auto;height:22px}
.tree__sub>li:first-child:last-child::before{height:34px}
.tree__sub>li::after{top:21px;width:16px;height:2px;background:linear-gradient(90deg,var(--ink) 50%,transparent 0) 0 0/4px 2px}

.ex__view{min-width:0;min-height:0;display:flex;flex-direction:column}
.ex__files{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));align-content:start;gap:24px 16px;padding:20px 20px 24px 16px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
/* ファイル：サムネイル（ひざ上）は影のある札の形で、押すと沈む。NEW は絵の上ではなく題の横 */
.card__link{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;color:var(--ink)}
.card__frame{flex:0 0 100%;aspect-ratio:4/5;background:var(--grey);border:var(--b) solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.card__link:active .card__frame{translate:4px 4px;box-shadow:none}
.card__img{object-position:var(--fx,50%) var(--fy,30%)}
.card__title{padding:0 6px;font-size:14px;font-weight:400;line-height:1.5;text-align:center}
.card__tag,.card__meta{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.card__new{flex:none;padding:0 6px;background:var(--y);border:2px solid var(--ink);font-size:12px;line-height:1.5}
@media (hover:hover){
.card__link:hover .card__title{background:var(--ink);color:var(--y)}
}
.card__link:focus-visible{outline-offset:4px}
/* 最後に詳細を見た作品：一覧に戻ったときに、どこから来たかが分かる */
.card__link[aria-current="true"] .card__title{background:var(--pink);color:var(--ink)}

/* 詳細（画像ビューア）：上に「戻る」と前後の送り、真ん中に絵の全体（引き）、下に題とジャンル・依頼主・年 */
.vw{flex:1;min-height:0;display:flex;flex-direction:column}
.vw__tools{flex:none;display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--paper-2);border-bottom:var(--b) solid var(--ink)}
.vw__back{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;font-size:15px;line-height:1}
.vw__back::before{--m:var(--i-back);width:14px;height:14px}
.vw__step{position:relative;width:44px;height:44px;padding:0}
.vw__step--prev{margin-left:auto}
.vw__step::before{position:absolute;left:50%;top:50%;width:10px;height:18px;translate:-50% -50%}
.vw__step--prev::before{--m:var(--i-prev)}
.vw__step--next::before{--m:var(--i-next)}
.vw__fig{flex:1;min-height:0;display:flex;flex-direction:column;margin:0}
.vw__stage{position:relative;flex:1;min-height:160px;background:repeating-conic-gradient(var(--paper) 0 25%,var(--paper-2) 0 50%) 0 0/24px 24px}
.vw__img{position:absolute;inset:16px;width:calc(100% - 32px);max-width:none;height:calc(100% - 32px);object-fit:contain}
.vw__cap{flex:none;padding:12px 16px 16px;border-top:var(--b) solid var(--ink)}
.vw__title{margin:0;font-size:18px;font-weight:400;line-height:1.4}
.vw__meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.5}

/* プロフィール：ログインの顔と同じアイコン（寄り）＝この OS の持ち主。名前・紹介・経歴 */
.note{overflow-y:auto;display:grid;grid-template-columns:160px minmax(0,1fr);align-content:start;gap:24px 32px;padding:32px}
.note__face{display:block;width:160px;height:160px;overflow:hidden;background:var(--grey);border:var(--b) solid var(--ink);box-shadow:var(--key)}
.note__face img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,40%)}
.note__name{margin:0 0 12px;font-size:40px;line-height:1.2}
.note__text{margin:0 0 24px}
.note__history{display:grid;gap:4px;margin:0}
.note__history div{display:grid;grid-template-columns:4em minmax(0,1fr);gap:12px}
.note__history dt{color:var(--muted)}
.note__history dd{margin:0}
/* 入力位置の目印（点滅させない）。テキストの窓で開いている遊び */
.note__history::after{content:"";width:12px;height:22px;margin-top:8px;background:var(--y);border:2px solid var(--ink)}

/* ご依頼：依頼先の説明と、メールを開くキー */
.mail{overflow-y:auto;display:grid;align-content:start;justify-items:start;gap:20px;padding:32px}
.mail__text,.mail__to{margin:0}
.mail__to{max-width:100%}
.mail__send{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px;font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.mail__send::before{content:"";flex:none;width:42px;height:30px;background:var(--i-mail) 0 0/42px 30px}

/* ---------- スマホ・タブレット：上に名前と SNS、下にドック、その間に窓（閉じると後ろの壁紙が見える） ---------- */
@media (max-width:1023px){
.bar{top:0;bottom:auto;align-items:center;gap:8px;height:var(--head);padding:0 12px 0 16px}
.bar__name{margin:0 auto 0 0;font-size:clamp(32px,10vw,48px);line-height:1}
.bar__sns{display:flex;gap:4px}
.bar__sns a{width:44px;height:44px}
.bar__back{margin:0 0 0 4px}
.dock{position:fixed;left:0;right:0;bottom:0;justify-content:center;padding:12px;border-width:var(--b) 0 0;box-shadow:none}
.dock .dock__apps{flex:1;max-width:560px;justify-content:space-between;gap:12px}
.dock__apps li{flex:1}
.dock__btn{width:100%;min-width:0;height:60px;font-size:12px}
.dock__ico{height:30px}
.dock__ico--folder{background-size:36px 28px}
.dock__ico--text{background-size:24px 28px}
.dock__ico--mail{background-size:36px 26px}
.dock .dock__sns{display:none}
.wall,.os[data-view="desk"] .wall{left:12px;right:12px;top:calc(var(--head) + 4px);bottom:calc(var(--dock-h) + 16px)}
.wall__shade{display:none}
.wall__chara{left:56%;top:30%;height:180%}
.win{left:0;right:0;top:var(--head);bottom:var(--dock-h);width:auto;height:auto;border-width:var(--b) 0;box-shadow:none}
.win:not([hidden]){animation-name:sheet-in}
@keyframes sheet-in{from{opacity:0;translate:0 32px}}
.note__name{font-size:32px}
.note,.mail{padding:24px 20px}
}
/* スマホ：木は上に畳み、押すと開く。選ぶと閉じて一覧が見える */
@media (max-width:639px){
.bar__back a{width:44px;gap:0;padding:0;justify-content:center;font-size:0}
.ex{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,auto) minmax(0,1fr)}
.ex__toggle{grid-row:1}
.ex__tree{grid-row:2}
.ex__view{grid-row:3}
.win__crumb--item{display:none}
.ex__toggle{display:flex;align-items:center;gap:8px;min-width:0;min-height:52px;padding:0 16px 0 12px;border:0;border-bottom:var(--b) solid var(--ink);background:var(--paper-2);color:var(--ink);font-size:15px;line-height:1.3;text-align:left}
.ex__toggle::before{content:"";flex:none;width:28px;height:22px;background:var(--i-folder) 0 0/28px 22px no-repeat}
.ex__toggle::after{--m:var(--i-down);flex:none;width:18px;height:10px;margin-left:auto}
.ex__toggle[aria-expanded="true"]::after{rotate:180deg}
@media (hover:hover){
.ex__toggle:hover{background:var(--ink);color:var(--y)}
}
.ex__toggle:focus-visible{outline-offset:-4px}
.ex__toggle-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex__toggle[aria-expanded="false"]+.ex__tree{display:none}
.ex__tree{border-right:0;border-bottom:var(--b) solid var(--ink)}
.tree{padding:8px}
.ex.is-detail .ex__toggle,.ex.is-detail .ex__tree{display:none}
.ex__files{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;padding:16px 16px 24px 12px}
.vw__tools{padding:8px 12px}
.vw__cap{padding:12px}
/* プロフィール：顔と名前を横に並べ、紹介と経歴は下に全幅で */
.note{grid-template-columns:96px minmax(0,1fr);align-items:center;gap:20px 16px}
.note__body{display:contents}
.note__face{width:96px;height:96px}
.note__name{margin:0}
.note__text,.note__history{grid-column:1/-1}
.note__text{margin:0}
}
/* とても狭い幅（360px 未満）：名前を小さくして、SNS と「比較に戻る」を1行に収める */
@media (max-width:359px){
.bar{gap:4px;padding:0 8px 0 12px}
.bar__name{font-size:26px}
}
@media (max-width:420px){
.login__face{width:176px;height:176px}
.login__cursor{top:104px}
}
@media (prefers-reduced-motion:reduce){
.win:not([hidden]),.pane:not([hidden]),.ex__files:not([hidden]),.vw:not([hidden]){animation:none}
}