/* MENTO — "washi & vermilion" theme from the new design: cream paper, vermilion seals, sumi ink, sakura, seigaiha.
   Fonts are self-hosted (fonts/fonts.css, OFL); artwork in /img (see CREDITS.txt). Class names are shared by every page. */
@import url(/fonts/fonts.css);
:root{
  --ivory:#f9f6f1;--paper:#fffdfa;--washi:#efeae2;--ink:#1a1512;--ink2:#645c55;--line:#ddd6cd;--line2:#ede7dd;
  --primary:#c2181d;--primary-h:#a9000d;--accent:#ffe8e3;--accent-fg:#a20711;--sumi:#1a1511;--sumi-fg:#f4f1ec;
  --indigo:#3a4a5c;--indigo-bg:#e9ecef;--sakura:#fabecb;--sakura-deep:#e990a4;--sakura-bg:#fdf0f2;--red:#c2181d;--redbg:#ffe8e3;
  --moss:#4f6b45;--ok:#2d6a4f;--okbg:#e2f1e8;--warn:#7a4f00;--warnbg:#fbefd0;--stop:#8c1d2a;
  --surface:#fff;--surface-soft:rgba(255,253,250,.7);--card-bg:rgba(255,253,250,.93);--hdr-bg:rgba(249,246,241,.88);--veil-a:rgba(249,246,241,.8);--veil-b:var(--hdr-bg);--brush:#1a1511;--btn-bg:var(--primary);--link:var(--primary);
  --r:14px;--r-sm:8px;--shadow:0 1px 0 rgba(26,21,18,.04),0 10px 26px -16px rgba(26,21,18,.28);
  --leaf:1.6rem .5rem 1.6rem .5rem;--leaf-alt:.5rem 1.6rem .5rem 1.6rem;
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif CJK JP",Georgia,serif;
  --sans:"Zen Kaku Gothic New",system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP","Noto Sans CJK JP",sans-serif;
  /* seigaiha: overlapping vermilion arcs (from the design) */
  --seigaiha:radial-gradient(circle at 50% 100%,transparent 38%,rgba(194,24,29,.16) 39%,rgba(194,24,29,.16) 42%,transparent 43%);
  /* kamon (five-petal family crest) used before eyebrows and as a watermark */
  --kamon:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='black'%3E%3Cpath d='M20 20 C14 14 14 6 18 3 L20 6 L22 3 C26 6 26 14 20 20Z'/%3E%3Cpath transform='rotate(72 20 20)' d='M20 20 C14 14 14 6 18 3 L20 6 L22 3 C26 6 26 14 20 20Z'/%3E%3Cpath transform='rotate(144 20 20)' d='M20 20 C14 14 14 6 18 3 L20 6 L22 3 C26 6 26 14 20 20Z'/%3E%3Cpath transform='rotate(216 20 20)' d='M20 20 C14 14 14 6 18 3 L20 6 L22 3 C26 6 26 14 20 20Z'/%3E%3Cpath transform='rotate(288 20 20)' d='M20 20 C14 14 14 6 18 3 L20 6 L22 3 C26 6 26 14 20 20Z'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-size:103.125%}
body{margin:0;min-height:100vh;color:var(--ink);font:16px/1.6 var(--sans);overflow-x:hidden;
  /* ink-wash pagoda landscape, faded into the paper so text stays readable */
  background:linear-gradient(rgba(249,246,241,.55),rgba(249,246,241,.82)),url(/img/bg-pagoda.jpg) center top/cover no-repeat,var(--ivory);background-attachment:fixed}
@media (max-width:860px){body{background-attachment:scroll;background-size:auto,auto 70vh,auto;background-position:0 0,60% 0,0 0}}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.25;margin:.2em 0 .5em;letter-spacing:.005em;overflow-wrap:anywhere}
h1{font-size:1.65rem}h2{font-size:1.25rem}h3{font-size:1.05rem}
p,li{overflow-wrap:anywhere}
a{color:var(--link)}a:hover{color:var(--primary-h)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center;padding:.8rem max(1.2rem,calc((100vw - 1180px)/2));background:var(--hdr-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:12px;background:var(--seigaiha);background-size:24px 12px;opacity:.7;pointer-events:none}
.top nav{display:flex;flex-wrap:wrap;gap:.25rem 1rem}
.top nav a,.brand{color:var(--ink);text-decoration:none;font-weight:500}.top nav a{color:var(--ink2);font-size:.92rem}.top nav a:hover{color:var(--ink)}
.brand{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--serif);font-weight:700;font-size:1.2rem;letter-spacing:.18em}
/* vermilion dot + katakana reading, as in the design */
.brand::before{content:"";width:.75rem;height:.75rem;border-radius:50%;background:var(--primary);flex:none}
.brand::after{content:"メント";font:500 .82rem/1 var(--serif);letter-spacing:0;color:var(--ink2)}
.brand .sub,.brand .badge{order:1;font-family:var(--sans);font-size:.86rem;font-weight:700;letter-spacing:.02em}
.brand .sub{color:var(--primary);border:1px solid rgba(194,24,29,.35);border-radius:99px;padding:.05rem .55rem;background:var(--paper)}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:1.4rem 1rem 3rem}.prose{max-width:760px}.narrow{max-width:440px;margin:2rem auto}
.card{position:relative;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--leaf);padding:1.15rem 1.25rem;margin:0 0 1rem;box-shadow:var(--shadow);min-width:0}
.card:nth-of-type(even){border-radius:var(--leaf-alt)}
.card>h1:first-child,.card>h2:first-child{margin-top:0}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid>*{min-width:0}
.split{display:grid;gap:1rem;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}
.eyebrow{display:flex;align-items:center;gap:.5rem;font:700 .86rem/1.25 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--primary);margin:0 0 .4rem}
.eyebrow::before{content:"";width:1rem;height:1rem;flex:none;background:currentColor;-webkit-mask:var(--kamon) center/contain no-repeat;mask:var(--kamon) center/contain no-repeat}
.section-title{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.section-title .jp{font-family:var(--serif);color:var(--ink2);font-size:.9rem;font-weight:500}

/* ---------- forms ---------- */
label{display:block;font-weight:600;margin:.8rem 0 .25rem}.hint{color:var(--ink2);font-size:.95rem;margin:.25rem 0}
input,textarea,select{width:100%;max-width:100%;font:inherit;padding:.65rem .75rem;border:1.5px solid #a39a90;border-radius:var(--r-sm);background:var(--surface);color:var(--ink);min-height:44px}
textarea{resize:vertical;line-height:1.5}
select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) no-repeat calc(100% - 1.2rem) 50%/6px 6px,linear-gradient(-45deg,transparent 50%,var(--ink) 50%) no-repeat calc(100% - .8rem) 50%/6px 6px var(--surface)}
input:hover,textarea:hover,select:hover{border-color:var(--ink2)}
input[type=checkbox],input[type=radio]{width:24px;height:24px;min-height:0;margin:0 .6rem 0 0;vertical-align:middle;accent-color:var(--red);flex:none}
.check{display:flex;align-items:flex-start;font-weight:500;gap:0}
.check span{padding-top:1px}
fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-weight:600;padding:0;margin:.8rem 0 .35rem}
.edited{font:700 .7rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--warn);margin-left:.4rem}
.field-row{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.field-row label{margin-bottom:.25rem}
.linkbtn{font:inherit;font-size:.85rem;background:none;border:0;padding:.2rem 0;color:var(--indigo);text-decoration:underline;cursor:pointer;min-height:32px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-weight:500;min-height:44px;min-width:44px;padding:.55rem 1.15rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;text-decoration:none;transition:background-color .15s,transform .05s}
.btn:hover{background:var(--washi);border-color:var(--ink2)}.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--btn-bg);border-color:var(--btn-bg);color:#fff}.btn.primary:hover{background:var(--primary-h);border-color:var(--primary-h)}
.btn.danger{border-color:var(--red);color:var(--red)}.btn.danger:hover{background:var(--redbg)}
.btn.accent{background:var(--sumi);border-color:var(--sumi);color:var(--sumi-fg)}.btn.accent:hover{background:#3a312b}
.btn.quiet{border-color:var(--line);font-weight:600}
.btn.big{min-height:60px;font-size:1.1rem;width:100%;margin:.4rem 0}
.btn.sos{background:var(--red);border-color:var(--red);color:#fff}.btn.sos:hover{background:var(--primary-h)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px;border-radius:4px}
.btn:focus-visible{box-shadow:0 0 0 5px #fff}

/* ---------- badges & tags ---------- */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .6rem;border-radius:99px;font-size:.86rem;font-weight:700;line-height:1.4;border:1.5px solid currentColor;background:var(--paper);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.b-ok{color:var(--ok);background:var(--okbg)}.b-warn{color:var(--warn);background:var(--warnbg)}.b-bad{color:#9a2733;background:var(--redbg)}.b-off{color:var(--ink2)}
.b-info{color:var(--indigo);background:var(--indigo-bg)}
.skill-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .7rem .2rem .3rem;border-radius:99px;font-weight:700;font-size:.85rem;border:1.5px solid var(--indigo);color:var(--indigo);background:var(--indigo-bg);max-width:100%}
.skill-badge .ico{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--surface);flex:none}
.skill-badge .ico svg{width:1rem;height:1rem}
.skill-badge.s-bonsai{border-color:var(--moss);color:var(--moss);background:#e8eee3}
.skill-badge.s-soldering{border-color:var(--indigo);color:var(--indigo);background:var(--indigo-bg)}
.skill-badge.s-unknown{border-color:#9a2733;color:#9a2733;background:var(--redbg)}
.skill-badge span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.tools{list-style:none;padding:0;margin:.3rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem}
.tools li{display:flex;flex-direction:column;gap:.05rem;padding:.4rem .7rem;border:1px solid var(--line);border-left:3px solid var(--indigo);border-radius:var(--r-sm);background:var(--surface);max-width:100%;min-width:0}
.tools li strong{font-size:.9rem}.tools li span{font-size:.82rem;color:var(--ink2)}
.tools.stack{flex-direction:column}
.tools.check-list li{flex-direction:row;align-items:flex-start}
.tools.check-list label{display:flex;align-items:flex-start;margin:0;font-weight:500;cursor:pointer}
.tools.check-list label>span{display:flex;flex-direction:column}

/* ---------- content blocks ---------- */
.moment{border-left:4px solid var(--red);padding:.55rem .9rem;margin:.65rem 0;background:var(--surface);border-radius:0 var(--r-sm) var(--r-sm) 0;min-width:0}
.ai{border-left-color:var(--ink2)}.expert{border-left-color:var(--ok)}
.empty{color:var(--ink2);font-style:italic}
.empty-art{display:flex;gap:.8rem;align-items:center;padding:.6rem;border:1px dashed var(--line);border-radius:var(--r-sm);background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(217,210,191,.18) 8px 9px)}
.empty-art svg{flex:none;width:42px;height:42px;color:var(--ink2);opacity:.7}
.err{color:#9a2733;font-weight:600}
.notice{padding:.7rem .9rem;border-radius:var(--r-sm);border:1.5px solid;margin:.6rem 0;font-weight:500}
.notice strong{display:block}
.notice.ok{border-color:var(--ok);background:var(--okbg);color:#1e4d38}
.notice.warn{border-color:#b58200;background:var(--warnbg);color:#5a3a00}
.notice.bad{border-color:#9a2733;background:var(--redbg);color:#7a1d28}
.notice.info{border-color:var(--indigo);background:var(--indigo-bg);color:#2a3f57}
.notice:empty{display:none}
.skel{height:1rem;border-radius:6px;background:linear-gradient(90deg,var(--line2),#f4efe2,var(--line2));background-size:200% 100%;margin:.5rem 0}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--surface);padding:.5rem;z-index:9}
.scroll{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{border:1px solid var(--line);padding:.4rem;text-align:left;vertical-align:top}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.row.sp{justify-content:space-between}
.row>*{min-width:0}
ul.plain{list-style:none;padding:0;margin:0}ul.plain li{padding:.4rem 0;border-bottom:1px solid var(--line2)}
details{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:.2rem .8rem;margin:.6rem 0}
details>summary{cursor:pointer;font-weight:600;padding:.5rem 0;min-height:44px;display:flex;align-items:center}
details[open]>summary{border-bottom:1px solid var(--line2);margin-bottom:.4rem}
.procedure{margin:.3rem 0 0;padding-left:1.6rem}
.procedure li{padding:.2rem 0}.procedure li::marker{font-family:var(--serif);font-weight:700;color:var(--red)}
.pre{white-space:pre-wrap}
video{display:block;width:100%;max-height:60vh;background:#111;border-radius:var(--r-sm)}
img{max-width:100%}
progress{width:100%;height:1.2rem;accent-color:var(--indigo)}
.rec{display:inline-flex;gap:.4rem;align-items:center;font-weight:700;color:var(--red)}
.dot{width:12px;height:12px;border-radius:50%;background:var(--red)}
.qr{width:200px;height:200px;max-width:100%;image-rendering:pixelated;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---------- dashboard: hero ---------- */
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:center;min-height:250px;padding:1.6rem 1.6rem 1.4rem;margin-bottom:1.2rem;border-radius:var(--r);border:1px solid var(--line);
  border-radius:var(--leaf);background:linear-gradient(100deg,var(--paper) 0 34%,rgba(255,253,250,.78) 52%,rgba(255,253,250,.1) 80%),url(/img/bg-hero.jpg) right 40%/cover no-repeat,var(--washi)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;background:var(--seigaiha);background-size:48px 24px;opacity:.6;pointer-events:none}
.hero h1{font-size:clamp(1.5rem,3.6vw,2.2rem);margin:.1rem 0 .4rem}
.hero p{max-width:52ch;margin:0 0 .7rem;color:var(--ink2)}
.hero .stats{display:flex;flex-wrap:wrap;gap:.5rem;padding-bottom:1.4rem}
.stat{display:flex;flex-direction:column;padding:.35rem .9rem;border:1px solid var(--line);border-radius:1rem;background:var(--card-bg)}
.stat b{font:700 1.25rem/1.2 var(--serif);color:var(--primary)}.stat span{font-size:.86rem!important}.stat span{font-size:.78rem;color:var(--ink2)}
/* sakura petals: a few drift through the dashboard hero; the landing page has a full shower (landing.js) */
.petal{position:absolute;top:0;width:14px;height:10px;background:linear-gradient(135deg,var(--sakura),var(--sakura-deep));border-radius:100% 0 100% 0;pointer-events:none;opacity:0}
.hero .petal:nth-of-type(1){left:62%}.hero .petal:nth-of-type(2){left:74%;width:10px;height:7px}.hero .petal:nth-of-type(3){left:86%}
@media (max-width:620px){.hero{background:linear-gradient(180deg,rgba(255,253,250,.94),rgba(255,253,250,.8)),url(/img/bg-hero.jpg) 70% 40%/cover no-repeat}}

/* ---------- dashboard: skill picker ---------- */
.skill-pick{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.skill-opt{position:relative;margin:0;display:flex;gap:.7rem;align-items:flex-start;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;font-weight:500;transition:border-color .15s,box-shadow .15s}
.skill-opt:hover{border-color:var(--ink2)}
.skill-opt input{position:absolute;opacity:0;pointer-events:none}
.skill-opt .ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--washi);flex:none;color:var(--ink)}
.skill-opt .ico svg{width:1.6rem;height:1.6rem}
.skill-opt b{display:block;font-family:var(--serif);font-size:1.02rem}
.skill-opt small{display:block;color:var(--ink2);font-size:.8rem;line-height:1.4}
.skill-opt .meta{margin-top:.25rem;font-size:.75rem;color:var(--ink2)}
.skill-opt:has(input:checked){border-color:var(--red);box-shadow:0 0 0 3px var(--sakura-bg),inset 4px 0 0 var(--red)}
.skill-opt:has(input:checked) .ico{background:var(--red);color:#fff}
.skill-opt:has(input:focus-visible){outline:3px solid #0b57d0;outline-offset:2px}
.skill-opt .chk{position:absolute;top:.5rem;right:.6rem;font-size:.75rem;font-weight:700;color:var(--red);display:none}
.skill-opt:has(input:checked) .chk{display:block}
.brief{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,#fff,var(--paper));padding:.9rem 1rem;margin-top:.8rem}
.brief h3{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.brief .objective{font-size:1rem;margin:.2rem 0 .6rem;padding-left:.7rem;border-left:3px solid var(--sakura)}
.brief .cues{font-size:.88rem;color:var(--ink2)}
.form-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--line)}

/* ---------- dashboard: session list & detail ---------- */
.sess-list{list-style:none;margin:0;padding:0 .2rem 0 0;display:flex;flex-direction:column;gap:.55rem}
@media (min-width:861px){.sess-list{max-height:34rem;overflow-y:auto}}
.sess-item{display:flex;gap:.7rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.sess-item.active{border-color:var(--red);box-shadow:inset 4px 0 0 var(--red)}
.sess-item .info{min-width:0;flex:1 1 180px}
.sess-item strong{display:block;font-family:var(--serif);font-size:1.02rem}
.sess-item .task{font-size:.88rem;color:var(--ink2);margin:.1rem 0 .3rem}
.sess-head{display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;align-items:flex-start}
.sess-head h1{margin-bottom:.3rem}
.join-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));margin:.8rem 0}
.join{border:1px solid var(--line);border-radius:var(--r);padding:.8rem;background:var(--surface);text-align:center}
.join h3{display:flex;justify-content:center;gap:.4rem;align-items:center;flex-wrap:wrap}
.join .url{word-break:break-all;font-size:.78rem}
.join.m{border-top:4px solid var(--ink)}.join.a{border-top:4px solid var(--red)}
.panel-title{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.panel-title::before{content:"";width:.55rem;height:.55rem;border-radius:2px;background:var(--red);transform:rotate(45deg);flex:none}
.convert{margin-top:.6rem;padding:.6rem .7rem;border:1px dashed var(--indigo);border-radius:var(--r-sm);background:var(--indigo-bg)}
.convert .hint{color:#2a3f57}
.k-src{font-size:.8rem;color:var(--ink2)}

/* ---------- phones ---------- */
.phone{max-width:640px}
.brief-head{background:linear-gradient(180deg,var(--paper),#fff);overflow:hidden}
.brief-head::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--seigaiha);background-size:28px 14px}
.brief-head h1{font-size:1.45rem;margin-top:.4rem}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .8rem;margin:.6rem 0;font-size:.95rem}
.kv dt{font-weight:700;color:var(--ink2);font-size:.86rem;text-transform:uppercase;letter-spacing:.06em;padding-top:.15rem}
.kv dd{margin:0}
.safety{border:2px solid var(--red);background:#fff7f6;border-radius:var(--r);padding:1rem}
.safety h2{color:#8c1d2a;display:flex;align-items:center;gap:.5rem}
.safety h2::before{content:"!";display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--red);color:#fff;font:700 1rem/1 var(--sans);flex:none}
.safety ul{margin:.2rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.45rem}
.safety li{padding:.55rem .7rem;background:var(--surface);border:1px solid #efc6ca;border-left:4px solid var(--red);border-radius:var(--r-sm);font-weight:500}
.safety li b{color:#8c1d2a}
.tools-card{border-top:4px solid var(--indigo)}
.steps-card{border-top:4px solid var(--moss)}
.gate{padding:.8rem;border-radius:var(--r-sm);background:var(--washi);border:1px solid var(--line)}
.blocking{border:2px solid #9a2733;background:var(--redbg);text-align:left}
.blocking h1{color:#7a1d28}
.status-line{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-radius:var(--r-sm);background:var(--washi);border:1px solid var(--line);font-weight:600;margin:.6rem 0}
.status-line::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--ink2);flex:none}
.status-line[data-s=live]::before{background:var(--ok)}.status-line[data-s=paused]::before{background:#b58200}.status-line[data-s=rec]::before{background:var(--red)}
.cam-wrap{position:relative}
.cam-wrap .rec{position:absolute;top:.6rem;left:.6rem;background:var(--card-bg);padding:.25rem .6rem;border-radius:99px}

/* assessment states — never by colour alone: each has an icon + label + explanation */
.as{border-left-width:6px;border-radius:0 var(--r-sm) var(--r-sm) 0}
.as .as-label{display:block;font-weight:800;font-size:1rem}
.as .as-note{display:block;font-size:.85rem;color:var(--ink2);margin-top:.2rem}
.as-on_track{border-left-color:var(--ok);background:#f4faf6}
.as-possible_issue{border-left-color:#b58200;background:#fffaf0}
.as-cannot_assess{border-left-color:var(--ink2);background:#f6f6f8;border-left-style:dashed}
.as-safety_stop{border-left-color:var(--stop);background:var(--redbg)}
.stop-banner{border:3px solid var(--stop);background:var(--redbg);border-radius:var(--r);padding:1rem;margin:.6rem 0}
.stop-banner h2{color:var(--stop);margin:0 0 .3rem;font-size:1.3rem}
.answer .clip-none{font-size:.85rem;color:var(--ink2);font-style:italic}

/* motion: optional only */
@media (prefers-reduced-motion:no-preference){
  .dot{animation:p 1.2s ease-in-out infinite}@keyframes p{50%{opacity:.35}}
  .skel{animation:sh 1.4s linear infinite}@keyframes sh{to{background-position:-200% 0}}
  .petal{animation:petal-fall 14s linear infinite}.hero .petal:nth-of-type(2){animation-delay:4s;animation-duration:17s}.hero .petal:nth-of-type(3){animation-delay:8s}
  @keyframes petal-fall{0%{transform:translate3d(0,-10vh,0) rotate(0);opacity:0}10%{opacity:.9}100%{transform:translate3d(var(--drift,80px),110vh,0) rotate(540deg);opacity:0}}
}
@media (prefers-reduced-motion:reduce){.petal{display:none}*{scroll-behavior:auto!important}}
@media (max-width:480px){
  .wrap{padding:1rem .75rem 2.5rem}.card{padding:.95rem .9rem}.top{padding:.65rem .8rem}
  h1{font-size:1.4rem}.hero{padding:1.1rem 1rem}.btn{padding:.55rem .9rem}
  .kv{grid-template-columns:minmax(0,1fr)}.kv dt{padding-top:.4rem}
}
@media print{.top::after,.hero::after,.petal{display:none}}

/* ---------- photos (licensed, bundled locally — see /img/CREDITS.txt) ---------- */
.p-soldering{background-image:url(/img/soldering.jpg)}.p-bonsai{background-image:url(/img/bonsai.jpg)}.p-kintsugi{background-image:url(/img/kintsugi.jpg)}.p-katana{background-image:url(/img/katana.jpg)}.p-custom{background-image:url(/img/custom.jpg)}
.skill-opt.has-photo{flex-wrap:wrap;padding-top:0;overflow:hidden}
.skill-opt .photo{display:block;flex:1 0 100%;height:96px;margin:0 -.9rem .2rem;width:calc(100% + 1.8rem);background-size:cover;background-position:center 40%;border-bottom:1px solid var(--line);filter:saturate(.85)}
.skill-opt:has(input:checked) .photo{filter:none}
.skill-opt.has-photo .chk{top:.45rem;background:var(--paper);padding:.05rem .5rem;border-radius:99px}
.banner{height:140px;margin:-1.1rem -1.15rem .8rem;background-size:cover;background-position:center 45%;border-bottom:1px solid var(--line)}
.brief-head .banner+.eyebrow{margin-top:0}
@media (max-width:480px){.banner{margin:-.95rem -.9rem .7rem;height:120px}}
.credits{font-size:.82rem;color:var(--ink2);text-align:center;margin:1.5rem auto 0;max-width:70ch;background:rgba(255,253,247,.8);padding:.4rem .8rem;border-radius:var(--r-sm)}
/* ---------- analysis progress ---------- */
.aprog{margin:.6rem 0;padding:.6rem .8rem;border:1px solid var(--indigo);border-radius:var(--r-sm);background:var(--indigo-bg)}
.aprog progress{height:.9rem;margin:.35rem 0}
.aprog .hint{color:#2a3f57}

/* ---------- dictation ---------- */
.mic-row{margin:.35rem 0 .5rem}
.btn.mic{border-color:var(--indigo);color:var(--indigo)}
.btn.mic.recording{background:var(--red);border-color:var(--red);color:#fff}
.btn.mic.recording::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--surface)}
@media (prefers-reduced-motion:no-preference){.btn.mic.recording::before{animation:p 1.2s ease-in-out infinite}}
.mic-st{flex:1 1 200px}
/* questions & knowledge: the record lives in a dropdown under its question */
.moment .question{font-size:1.06rem;font-weight:600;line-height:1.45;margin:.45rem 0}
details.kdrop{margin:.7rem 0 .2rem;border-color:var(--indigo-bg);background:#fbfcfe}
details.kdrop>summary{gap:.45rem;flex-wrap:wrap}
details.kdrop .moment{border-left-color:var(--indigo);margin:.3rem 0;padding-left:.7rem}
.qcount{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;margin:0}
.qcount select{width:auto;min-height:44px}
/* landing page */
.landing-hero h1{font-size:clamp(1.9rem,5vw,2.8rem)}
.section-title{margin:1.4rem 0 .4rem}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.role{display:flex;flex-direction:column;gap:.5rem}
.role .btn{text-align:center;text-decoration:none}
.entry-qr{display:flex;gap:.7rem;align-items:center;margin-top:.4rem}
.entry-qr img{border-radius:8px;border:1px solid var(--line);background:var(--surface);flex:none}
.code-form input{font-size:1.4rem;letter-spacing:.25em;text-transform:uppercase;font-family:ui-monospace,monospace;text-align:center}
.join-code{display:flex;flex-direction:column;gap:.15rem;margin:.4rem 0}
.join-code b{font-size:1.9rem;letter-spacing:.2em;font-family:ui-monospace,monospace;color:var(--ink)}
/* student tabs */
.tabs{display:flex;gap:.35rem;position:sticky;top:0;z-index:5;background:var(--hdr-bg);padding:.5rem 0;margin:.4rem 0;overflow-x:auto}
.tabs button{flex:1;min-height:48px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;font-weight:600;cursor:pointer;padding:.4rem .8rem;white-space:nowrap}
.tabs button[aria-selected=true]{background:var(--primary);border-color:var(--primary);color:#fff}
.tab-n{font-weight:500;font-size:.85em;margin-left:.2rem}
.tab-off{position:absolute!important;left:-200vw;width:100%;height:0;overflow:hidden}
.lesson-step{margin:1rem 0 .2rem;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--indigo)}
.lesson-sum{font-weight:600;font-size:1.04rem}
.lesson.learned{opacity:.8;border-left-color:var(--ok)}
.new-sess{border:1px solid var(--line);border-radius:var(--r-sm);padding:.8rem;margin:.6rem 0;background:var(--surface)}
/* master sign-in */
.seg{display:flex;gap:.3rem;margin:.6rem 0 .3rem;background:var(--line2);padding:.25rem;border-radius:999px}
.seg button{flex:1;min-height:44px;border:0;border-radius:999px;background:transparent;font:inherit;font-weight:600;cursor:pointer}
.seg button[aria-selected=true]{background:var(--surface);box-shadow:var(--shadow)}
.who{display:inline-flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.rec-list li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.trash li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
/* ---------- language switch (every page header) ---------- */
.lang-toggle{margin-left:auto;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.3rem .8rem;min-height:36px;font:inherit;font-size:.88rem;cursor:pointer;color:var(--ink2);white-space:nowrap}
.lang-toggle .on{font-weight:700;color:var(--ink)}
header.top nav{margin-left:auto}
header.top nav + .lang-toggle{margin-left:.6rem}
/* quiet connection state */
.conn{display:inline-flex;align-items:center;gap:.3rem;margin-left:.6rem;font-size:.82rem;color:var(--ink2)}
.conn-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--ok);vertical-align:middle}
.conn-dot.off{background:#b58200}
.conn-txt{font-size:.82rem;color:var(--ink2)}
/* ---------- dashboard: sticky header + section bar, smooth jumps ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.dash .sticky-top{position:sticky;top:0;z-index:40;background:var(--hdr-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.dash header.top{position:static}
.dnav{border-top:1px solid var(--line2)}
.dnav-in{display:flex;gap:.25rem;overflow-x:auto;padding:.35rem max(1rem,calc((100vw - 1180px)/2));scrollbar-width:thin}
.dnav a,.dnav button{white-space:nowrap;text-decoration:none;color:var(--ink2);padding:.35rem .7rem;border-radius:999px;font-size:.9rem;border:0;background:none;font:inherit;cursor:pointer;min-height:36px;display:inline-flex;align-items:center;gap:.25rem}
.dnav a:hover,.dnav button:hover{background:var(--line2);color:var(--ink)}
.dnav .live{background:var(--sumi);color:var(--sumi-fg);font-weight:600}
.dnav .live:hover{background:var(--sumi);color:var(--sumi-fg);filter:brightness(1.25)}
.dnav .n{background:var(--warnbg);color:#5a3a00;border-radius:999px;padding:0 .45rem;font-size:.78rem;font-weight:700}
.dnav .n.bad{background:var(--redbg);color:#7a1d28}
.dash section[id],.dash [id^="sec-"]{scroll-margin-top:calc(var(--sticky-h,110px) + 12px)}
.hero.compact{padding-block:1.2rem}
.hero.compact h1{font-size:clamp(1.5rem,3.4vw,2.1rem)}
/* ---------- session: main column + quiet activity side panel ---------- */
.sess-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:1rem;align-items:start}
.sess-side{position:sticky;top:calc(var(--sticky-h,110px) + 12px);font-size:.9rem;padding:.9rem 1rem}
.side-h{font-size:1rem;margin:0 0 .5rem;display:flex;justify-content:space-between;align-items:center}
.side-kv{display:grid;grid-template-columns:auto 1fr;gap:.25rem .6rem;margin:0}
.side-kv dt{color:var(--ink2);font-weight:600}.side-kv dd{margin:0}
.side-todo{list-style:none;padding:0;margin:.7rem 0 0;border-top:1px solid var(--line2);padding-top:.5rem}
.side-todo li{padding:.15rem 0}.side-todo a.bad{color:#9a2733;font-weight:600}
@media (max-width:900px){.sess-layout{grid-template-columns:1fr}.sess-side{position:static;order:-1}}
details.joins{margin-top:.8rem}
details.joins>summary b{letter-spacing:.12em;font-family:ui-monospace,monospace;margin-left:.3rem}
.btn.sm{min-height:34px;padding:.25rem .65rem;font-size:.88rem}
.recitem{padding:.4rem 0 .8rem;border-bottom:1px solid var(--line2);margin-bottom:.6rem}
.recitem:last-child{border-bottom:0}
details.addm{margin-top:.4rem}
.moment.follow{margin-left:1.2rem;border-left-color:var(--indigo)}
.manual-text{white-space:pre-wrap;font-size:.88rem;max-height:16rem;overflow:auto;background:var(--paper,#fff);padding:.5rem .7rem;border-radius:var(--r-sm)}
/* knowledge under a question: one compact line */
.kchip{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.5rem 0 .1rem;padding:.4rem .6rem;background:#f7f8fb;border:1px solid var(--indigo-bg);border-radius:var(--r-sm)}
.kchip-l{display:inline-flex;gap:.3rem;align-items:center;white-space:nowrap}
.kchip-sum{flex:1;min-width:10rem;color:var(--ink2);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* knowledge library */
.seg.filt{display:inline-flex;margin:.2rem 0 .6rem}
.seg.filt button[aria-pressed=true]{background:var(--surface);box-shadow:var(--shadow)}
.klist{list-style:none;padding:0;margin:0}
.klist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:.6rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--line2)}
.kl-main{display:flex;flex-direction:column;min-width:0}.kl-main span{color:var(--ink2);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.klist li{grid-template-columns:1fr auto}.klist .kl-st,.klist .hint{grid-column:1}}
/* knowledge record side panel */
.kpanel{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);background:var(--ivory);z-index:60;box-shadow:-8px 0 30px rgba(20,30,50,.18);overflow-y:auto;padding:1rem 1.1rem 2rem;animation:kpin .18s ease-out}
@keyframes kpin{from{transform:translateX(30px)}to{transform:none}}
.kback{position:fixed;inset:0;background:rgba(20,30,50,.28);z-index:55}
.kp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.kp-head h2{margin:0;font-size:1.15rem}
.kp-x{border:0;background:none;font-size:1.4rem;cursor:pointer;min-width:44px;min-height:44px;border-radius:50%}
.kp-x:hover{background:var(--line2)}
.kp-src{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-sm);padding:.5rem .7rem;margin:.6rem 0}
.kp-form label{margin-top:.6rem}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.kp-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem;position:sticky;bottom:-2rem;background:var(--ivory);padding:.6rem 0}
details.kp-more{margin-top:.4rem}
body.panel-open{overflow:hidden}
@media (min-width:1200px){body.panel-open{overflow:auto}body.panel-open .kback{background:transparent;pointer-events:none}}
/* small screens: the dashboard's section bar replaces the header links, keeping the sticky area short */
@media (max-width:640px){.dash header.top nav{display:none}.dash header.top{padding-block:.4rem}}
details.q-en{margin:.1rem 0 .4rem;border:0;background:none;padding:0}
details.q-en>summary{min-height:auto;padding:.1rem 0;font-weight:500;font-size:.85rem;color:var(--ink2)}
details.q-en p{margin:.2rem 0;font-size:.9rem;color:var(--ink2)}

/* ---------- new design: app pages ---------- */
/* phones and the dashboard keep the header in normal flow (their own sticky bars sit at the top) */
body:has(main.phone) .top{position:relative}
.dash header.top::after{display:none}
.dash .sticky-top::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:12px;background:var(--seigaiha);background-size:24px 12px;opacity:.7;pointer-events:none}
.panel-title::before{background:var(--primary)}
.moment{border-left-color:var(--primary);background:var(--card-bg)}
.join.a{border-top-color:var(--primary)}.join.m{border-top-color:var(--sumi)}
.skill-opt:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 3px var(--accent),inset 4px 0 0 var(--primary)}
.skill-opt:has(input:checked) .ico{background:var(--primary)}
.safety{background:#fff8f6}
.phone .card{border-radius:var(--leaf)}
.seg button[aria-selected=true]{color:var(--primary)}

/* =================== landing page =================== */
/* One calm background for the whole page (a fixed layer also works on phones); sections have no bands or dividing lines. */
body.landing{background:var(--ivory)}
body.landing::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--veil-a),var(--veil-b)),url(/img/bg-fuji.jpg) center/cover no-repeat}
.landing .top{background:var(--hdr-bg);border-bottom:0;box-shadow:0 8px 24px -22px rgba(26,21,18,.6)}
.landing .top::after{display:none}
.landing main{display:block}
.l-sec{position:relative;padding:5.5rem 0}
.l-in{position:relative;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.l-sec h2{font-size:clamp(1.9rem,4vw,2.6rem);max-width:24ch;margin:.5rem 0 0}
.l-sec .lead{max-width:62ch;color:var(--ink2);font-size:1.08rem;margin-top:.9rem}
.eyebrow .jp,.l-sec .jp,.l-foot .jp{font:500 .92rem/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink2)}
/* the one card style used everywhere on the page */
.l-box{position:relative;overflow:hidden;background:var(--card-bg);border:1px solid var(--line);border-radius:2rem .6rem 2rem .6rem;box-shadow:0 18px 40px -30px rgba(26,21,18,.45)}
/* petals */
.petals{position:fixed;inset:0;z-index:10;overflow:hidden;pointer-events:none}
.petals .petal{position:absolute}
@media (prefers-reduced-motion:reduce){.petals{display:none}}
/* navigation: the three ways in */
.l-nav{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.landing .top .l-nav a{color:var(--ink);font-size:.92rem;font-weight:500;padding:.4rem .9rem;border-radius:99px;border:1px solid var(--line);background:var(--paper);text-decoration:none}
.landing .top .l-nav a:hover{border-color:var(--primary);color:var(--primary)}
.landing .top .l-nav a:first-child{background:var(--primary);border-color:var(--primary);color:#fff}
.btn .ico svg,.l-cta .ico svg{width:1rem;height:1rem;display:block}
/* hero */
.l-hero{padding:4.5rem 0 3rem}
.l-hero-grid{display:grid;gap:3rem;align-items:center;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.l-hero h1{font-size:clamp(2.4rem,5.6vw,3.9rem);line-height:1.12;margin:.2rem 0 0}
.l-hero h1 em{font-style:normal;color:var(--primary);position:relative;white-space:nowrap}
.l-hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.12em;border-radius:99px;background:rgba(194,24,29,.3);transform:rotate(-1deg)}
.l-hero .lead{font-size:1.14rem;max-width:34rem;margin-top:1.4rem}
.l-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.l-cta .btn{padding:.75rem 1.5rem}
.hanko-line{display:flex;align-items:center;gap:.8rem;color:var(--ink2);font:500 .92rem/1.4 var(--serif);margin:0 0 1rem}
.hanko{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;flex:none;border:2px solid var(--primary);border-radius:3px;color:var(--primary);font:700 1.15rem/1 var(--serif);transform:rotate(3deg)}
.hero-art{position:relative;max-width:520px;margin:0 auto;width:100%}
.enso{display:block;width:100%;height:auto;overflow:visible}
.enso-kanji{font:700 150px/1 var(--serif);fill:var(--primary)}
.seal-t{font:700 34px/1 var(--serif);fill:#fff}.seal-t.red{fill:var(--primary)}
.enso-stroke{stroke-dasharray:1;stroke-dashoffset:0}
.enso-orbit{transform-box:view-box;transform-origin:260px 260px;animation:flow-rotate 80s linear infinite}
.enso-flow{animation:dash-drift 9s linear infinite}
.hero-art .vtext{position:absolute;left:-2.4rem;top:1rem;writing-mode:vertical-rl;font:500 .95rem/1 var(--serif);letter-spacing:.5em;color:var(--ink2)}
@media (prefers-reduced-motion:no-preference){
  .enso-stroke{stroke-dashoffset:1}.enso-kanji,.enso-seal,.enso-sun{opacity:0}
  .hero-art.is-visible .enso-stroke{animation:enso-draw 2.2s cubic-bezier(.6,.05,.3,1) .2s forwards}
  .hero-art.is-visible .enso-stroke.thin{animation-delay:.5s}
  .hero-art.is-visible :is(.enso-kanji,.enso-seal,.enso-sun){animation:fade-up .9s ease forwards}
  .hero-art.is-visible .enso-kanji{animation-delay:1.4s}.hero-art.is-visible .enso-seal{animation-delay:1.8s}.hero-art.is-visible .enso-seal.s2{animation-delay:2.1s}.hero-art.is-visible .enso-sun{animation-delay:2.4s}
}
@keyframes enso-draw{to{stroke-dashoffset:0}}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1}}
.enso-seal{transform-box:fill-box}
.l-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:3.5rem;perspective:1000px}
.hl{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:start;padding:1.4rem 1.5rem;background:var(--card-bg);border:1px solid var(--line);border-radius:1.6rem .5rem 1.6rem .5rem;
  box-shadow:0 18px 36px -26px rgba(26,21,18,.5);opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hl:nth-child(2){transition-delay:.12s}.hl:nth-child(3){transition-delay:.24s}.hl.is-visible{opacity:1;transform:none}
.hl h3{grid-column:2;margin:.1rem 0 .3rem;font-size:1.15rem}.hl p{grid-column:2;margin:0;color:var(--ink2);font-size:.97rem;line-height:1.6}
.hl-seal{grid-row:1/3;display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:.4rem;background:var(--primary);color:#fff;font:700 1.5rem/1 var(--serif);transform:rotate(-4deg);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 6px 12px -6px rgba(194,24,29,.7)}
.hl-seal.ink{background:var(--sumi);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 6px 12px -6px rgba(26,21,18,.7);transform:rotate(3deg)}
.hl-seal.light{background:var(--paper);color:var(--primary);box-shadow:inset 0 0 0 2px var(--primary),0 6px 12px -6px rgba(26,21,18,.4);transform:rotate(-2deg)}
/* problem: a sumi-ink panel inside the page, not a full-width band */
.l-ink{position:relative;overflow:hidden;background:var(--sumi);color:var(--sumi-fg);border-radius:2.4rem .8rem 2.4rem .8rem;padding:3.5rem 3rem}
.l-ink::before{content:"";position:absolute;inset:0;background:url(/img/bg-ink.jpg) center/cover;opacity:.7;pointer-events:none}
.l-ink h2{color:var(--sumi-fg)}.l-ink .jp{color:rgba(244,241,236,.55)}
.big-kanji{position:absolute;right:-1rem;top:-2.5rem;font:700 15rem/1 var(--serif);color:rgba(244,241,236,.05);pointer-events:none}
.l-two{position:relative;display:grid;gap:3rem;grid-template-columns:1fr 1fr;align-items:center}
.l-why{list-style:none;margin:0;padding:0}
.l-why li{display:flex;gap:.8rem;font-size:1.12rem;padding:0 0 1.2rem;margin-bottom:1.2rem;border-bottom:1px solid rgba(244,241,236,.15)}
.l-why li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.l-why li::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--primary);margin-top:.65rem}
/* how it works: four identical cards */
.l-steps{list-style:none;padding:0;margin:3rem 0 0;display:grid;gap:1.5rem;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.l-steps li{display:flex;flex-direction:column;padding:1.8rem 1.6rem 2rem;min-height:100%;opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.l-steps li:nth-child(2){transition-delay:.1s}.l-steps li:nth-child(3){transition-delay:.2s}.l-steps li:nth-child(4){transition-delay:.3s}
.l-steps li.is-visible{opacity:1;transform:none}
.l-steps li::after{content:"";position:absolute;right:.6rem;bottom:.6rem;width:3.2rem;height:3.2rem;background:rgba(194,24,29,.08);-webkit-mask:var(--kamon) center/contain no-repeat;mask:var(--kamon) center/contain no-repeat}
.step-top{display:flex;align-items:center;justify-content:space-between}
.step-ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--accent);color:var(--accent-fg)}
.step-ico svg{width:1.4rem;height:1.4rem}
.l-steps .num{font:600 1.02rem/1 var(--serif);color:var(--ink2)}
.l-steps h3{font-size:1.3rem;margin:1.3rem 0 .5rem}.l-steps p{font-size:.97rem;color:var(--ink2);margin:0;line-height:1.65}
/* features */
.l-feats{display:grid;gap:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:3rem}
.feat{display:flex;gap:1.2rem;padding:1.6rem;opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease,box-shadow .3s ease}
.feat:nth-child(2){transition-delay:.11s}.feat:nth-child(3){transition-delay:.22s}.feat:nth-child(4){transition-delay:.33s}
.feat.is-visible{opacity:1;transform:none}
.feat:hover{box-shadow:0 18px 40px -18px rgba(194,24,29,.35)}
.feat h3{font-size:1.15rem;margin:0}.feat p{font-size:.95rem;color:var(--ink2);margin:.35rem 0 0}
.feat-blob{position:absolute;left:-1.5rem;top:-1.5rem;width:6rem;height:6rem;border-radius:50%;background:rgba(194,24,29,.1);filter:blur(16px);transition:transform .5s}
.feat:hover .feat-blob{transform:scale(1.6)}
.ring{position:relative;flex:none;width:3.5rem;height:3.5rem;display:grid;place-items:center;color:var(--primary)}
.ring>svg{position:absolute;inset:0;width:100%;height:100%;animation:flow-rotate 24s linear infinite}
.feat:hover .ring>svg{animation-duration:6s}
.ring .ico{position:relative;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--accent);color:var(--accent-fg);transition:background .3s,color .3s}
.ring .ico svg{width:1.25rem;height:1.25rem}
.feat:hover .ring .ico{background:var(--primary);color:#fff}
.feat-stroke{position:absolute;bottom:.75rem;left:1.6rem;height:.25rem;width:0;border-radius:99px;background:rgba(194,24,29,.4);transition:width .45s cubic-bezier(.22,1,.36,1)}
.feat:hover .feat-stroke{width:calc(100% - 3.2rem)}
/* skills: identical cards */
/* five equal cards: rows of three, the last row centred */
.l-skills{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:2.5rem}
.l-skills>.skill-card{flex:0 0 calc((100% - 3rem)/3);min-height:30rem}
.skill-card{display:flex;flex-direction:column;padding:0 1.8rem 1.8rem}
.skill-img{position:relative;display:block;height:11rem;margin:0 -1.8rem 1.2rem;overflow:hidden;border-bottom:1px solid var(--line)}
.skill-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s}
.skill-card:hover .skill-img img{transform:scale(1.07)}
.skill-img::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(26,21,18,.28));pointer-events:none}
/* the craft's kanji as a peelable seal sticker on the photo */
.skill-card .kanji{position:absolute;right:1rem;top:8.6rem;z-index:2;display:grid;place-items:center;min-width:3.4rem;height:3.4rem;padding:0 .5rem;border-radius:.45rem;background:var(--primary);color:#fff;font:700 1.15rem/1 var(--serif);transform:rotate(-5deg);box-shadow:0 0 0 3px #fff,0 8px 16px -6px rgba(26,21,18,.55);pointer-events:auto}
.skill-head{display:flex;align-items:center;gap:.7rem}
.skill-card h3{font-size:1.3rem;margin:1rem 0 .4rem}.skill-card p{color:var(--ink2);font-size:.96rem;margin:0;line-height:1.65}
.skill-foot{display:flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1.2rem;font-size:.92rem;color:var(--ink)}.skill-foot svg{width:1.2rem;height:1.2rem;color:var(--primary);flex:none}
.skill-ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;flex:none;border-radius:50%;background:var(--accent);color:var(--accent-fg)}.skill-ico svg{width:1.4rem;height:1.4rem}
/* technical: the diagrams sit straight on the page background */
.landing .flow{margin:3.5rem 0 0;padding:0;background:none;border:0;box-shadow:none}
.flow-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:1px dashed rgba(194,24,29,.25);padding-bottom:.6rem}
.flow-head h3{margin:0;font-size:1.45rem}
.flow-scroll{overflow-x:auto}
.flow-svg{display:block;margin:0 auto;width:100%;height:auto}
.flow-svg.radial{max-width:1180px}.flow-svg.river{max-width:1180px}
.svg-serif{font-family:var(--serif)}
.flow-edge{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .9s ease-out,opacity .2s ease}
.flow.is-visible .flow-edge{stroke-dashoffset:0;opacity:1}
/* the circle forms as it scrolls into view: steps fly out from the hub to their places while the ring turns into position */
.l-flow-radial .flow-node{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) scale(.25);transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.l-flow-radial.is-visible .flow-node{opacity:1;transform:none}
.flow-spin{transform:rotate(-50deg);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.l-flow-radial.is-visible .flow-spin{transform:none}
.flow-hub{opacity:0;transition:opacity .5s ease}.l-flow-radial.is-visible .flow-hub{opacity:1}
.flow-label{opacity:0;transition:opacity .6s ease}.l-flow-radial.is-visible .flow-label{opacity:1}
.l-flow-river .flow-node{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.l-flow-river.is-visible .flow-node{opacity:1;transform:none}
.flow-ring-rev{transform-box:view-box;transform-origin:center;animation:flow-rotate-rev 90s linear infinite}
.flow-drift{animation:dash-drift 12s linear infinite}
@keyframes flow-rotate{to{transform:rotate(360deg)}}@keyframes flow-rotate-rev{from{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes dash-drift{to{stroke-dashoffset:-200}}
/* phones: diagrams become a readable vertical path */
.flow-list{list-style:none;margin:1.4rem 0 0;padding:0 0 0 .2rem;position:relative}
.flow-list::before{content:"";position:absolute;left:2.05rem;top:1.5rem;bottom:1.5rem;width:2px;background:repeating-linear-gradient(var(--primary) 0 6px,transparent 6px 12px);opacity:.5}
.flow-li{position:relative;display:flex;align-items:center;gap:1rem;padding:.55rem 0;opacity:0;transform:translateX(-12px);transition:opacity .5s ease,transform .5s ease}
.flow.is-visible .flow-li{opacity:1;transform:none}
.fl-seal{display:grid;place-items:center;flex:none;width:3.7rem;height:3.7rem;border-radius:50%;background:var(--paper);border:2px solid var(--primary);font:700 1.05rem/1 var(--serif);color:var(--primary)}
.flow-li.primary .fl-seal{background:var(--primary);color:#fff}.flow-li.ink .fl-seal{background:var(--sumi);border-color:var(--sumi);color:var(--sumi-fg)}
.fl-txt{display:flex;flex-direction:column}.fl-txt b{font:700 1.12rem/1.3 var(--serif)}.fl-txt span{color:var(--ink2);font-size:.95rem}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}.reveal.is-visible{opacity:1;transform:none}
/* technology boxes: same size, larger text */
.l-stack{display:grid;gap:1.5rem;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;margin-top:4rem}
.stack-card{display:flex;flex-direction:column;padding:1.9rem;transition:opacity .6s ease,transform .3s ease}
.stack-card:hover{transform:translateY(-4px)}
.stack-card h3{font-size:1.35rem;margin:1.2rem 0 .4rem}.stack-card p{color:var(--ink2);font-size:1.02rem;line-height:1.65;margin:0}
.motif-bg{position:absolute;right:-1.2rem;bottom:-1.2rem;width:8rem;height:8rem;color:rgba(194,24,29,.09);transition:transform .5s,color .5s}.motif-bg svg{width:100%;height:100%}
.stack-card:hover .motif-bg{transform:rotate(6deg);color:rgba(194,24,29,.18)}
.badge-ring{position:relative;display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;border:1px solid rgba(194,24,29,.4);background:rgba(255,232,227,.7);color:var(--primary)}
.badge-ring>svg{position:relative;width:1.5rem;height:1.5rem}
.badge-ring .motif{position:absolute;inset:0;padding:.25rem;color:rgba(194,24,29,.45)}.badge-ring .motif svg{width:100%;height:100%}
.chip{border-radius:99px;background:var(--accent);color:var(--accent-fg);padding:.2rem .75rem;font:500 .92rem/1.6 ui-monospace,monospace}
.l-princ{display:grid;grid-template-columns:repeat(4,1fr);margin-top:3rem;border:1px solid var(--line);border-radius:2rem;background:var(--card-bg);overflow:hidden}
.l-princ>div{padding:1.6rem}.l-princ>div+div{border-left:1px solid var(--line)}
.l-princ b{display:block;font:700 1.3rem/1.2 var(--serif);color:var(--primary)}.l-princ span{font-size:.95rem;color:var(--ink2)}
/* privacy */
.l-priv{padding:2rem 2.2rem}.l-priv h2{margin-top:0}
/* the end: the three ways in */
.l-final{padding-top:1rem}
.l-cta-box{position:relative;overflow:hidden;border-radius:2.6rem .8rem 2.6rem .8rem;background:var(--primary);color:#fff;padding:3.5rem 2.2rem}
.wash-red{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55;pointer-events:none}
.l-cta-in{position:relative;text-align:center}.l-cta-in h2{color:#fff;margin:0 auto;max-width:none}.l-cta-in>p{opacity:.92;max-width:34rem;margin:1rem auto 0}
.l-cta-in .tagline{font:500 .95rem/1 var(--serif);letter-spacing:.4em;opacity:.85;margin:0 0 .6rem}
.l-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;margin-top:2.4rem;text-align:left}
.door{display:flex;flex-direction:column;gap:.6rem;background:var(--card-bg);color:var(--ink);border-radius:1.6rem .5rem 1.6rem .5rem;padding:1.6rem}
.door h3{margin:0;font-size:1.3rem}.door p{margin:0;color:var(--ink2);font-size:.95rem}
.door .btn{width:100%}
.door>.btn,.door .code-form{margin-top:auto}
.door .entry-qr,.door-extra{min-height:96px;margin-top:.2rem;display:flex;align-items:center}
.door-ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--accent);color:var(--accent-fg)}.door-ico svg{width:1.4rem;height:1.4rem}
.door .code-form{display:flex;flex-direction:column;gap:.5rem}
.door .entry-qr img{width:96px;height:96px}
.l-cta-in .notice{text-align:left}
.l-foot{padding:2.5rem 0 3rem;font-size:.92rem;color:var(--ink2)}
.l-foot .row{gap:1rem}.l-foot a{color:var(--ink2)}.l-foot .brand{font-size:1rem}.l-foot .brand::after{display:none}
@media (prefers-reduced-motion:reduce){
  .feat,.reveal,.flow-node,.flow-li,.flow-label,.flow-hub{opacity:1!important;transform:none!important}.flow-edge{stroke-dashoffset:0;opacity:1}.flow-spin{transform:none}
  .ring>svg,.flow-ring-rev,.flow-drift,.enso-orbit,.enso-flow{animation:none}.koi{display:none}
}
@media (max-width:1000px){
  .l-hero-grid,.l-two{grid-template-columns:minmax(0,1fr)}.hero-art{max-width:420px}
  .l-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.l-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .l-highlights{grid-template-columns:minmax(0,1fr)}
  .l-doors{grid-template-columns:minmax(0,1fr)}.l-skills>.skill-card{flex-basis:calc((100% - 1.5rem)/2)}
  .l-princ{grid-template-columns:1fr 1fr}.l-princ>div:nth-child(3){border-left:0}.l-princ>div:nth-child(n+3){border-top:1px solid var(--line)}
  .hero-art .vtext{display:none}
}
@media (max-width:620px){
  .l-sec{padding:3.5rem 0}.l-in{padding:0 1rem}
  .landing .top{gap:.5rem}.landing .l-nav{width:100%;order:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}.landing .top .l-nav a{text-align:center;padding:.45rem .2rem;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
  .l-steps,.l-feats,.l-stack{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}.l-skills>.skill-card{flex-basis:100%;min-height:0}
  .l-highlights{grid-template-columns:minmax(0,1fr)}
  .l-ink{padding:2.2rem 1.4rem}.big-kanji{font-size:10rem}
  .l-cta-box{padding:2.6rem 1rem}
}
.card:empty{display:none}
.tools-card{border-top-color:var(--sumi)}.steps-card{border-top-color:var(--primary)}.tools li{border-left-color:var(--sumi)}

/* ================= interactions: stickers, peel, tilt, light ================= */
@property --peel{syntax:'<length>';inherits:false;initial-value:0px}
/* die-cut stickers in the hero: white border, soft shadow; they peel at the corner on hover and lift when dragged */
.stickers{position:absolute;inset:0;pointer-events:none;z-index:3}
.sticker{position:absolute;left:var(--x);top:var(--y);pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
  display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem .55rem .6rem;border-radius:.9rem;font:700 .95rem/1.1 var(--sans);white-space:nowrap;
  rotate:var(--r,0deg);translate:var(--dx,0px) var(--dy,0px);scale:var(--s,1);
  box-shadow:0 0 0 4px #fff,0 2px 3px rgba(26,21,18,.18),0 12px 22px -12px rgba(26,21,18,.55);
  clip-path:polygon(-10px -10px,calc(100% + 10px) -10px,calc(100% + 10px) calc(100% - var(--peel)),calc(100% - var(--peel)) calc(100% + 10px),-10px calc(100% + 10px));
  transition:--peel .35s cubic-bezier(.3,1.4,.5,1),scale .3s cubic-bezier(.3,1.5,.5,1),rotate .4s cubic-bezier(.3,1.5,.5,1),box-shadow .3s,translate .45s cubic-bezier(.3,1.4,.5,1)}
.sticker b{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;font:700 1rem/1 var(--serif);background:rgba(255,255,255,.18)}
.sticker::after{content:"";position:absolute;right:0;bottom:0;width:var(--peel);height:var(--peel);border-radius:0 0 .9rem 0;
  background:linear-gradient(135deg,transparent 50%,#f3eee6 50%,#fff 75%,#e6dfd3);box-shadow:-3px -3px 6px rgba(26,21,18,.18);transition:inherit;pointer-events:none}
.s-red{background:var(--primary);color:#fff}.s-ink{background:var(--sumi);color:var(--sumi-fg)}.s-cream{background:#fff6e9;color:var(--primary)}.s-cream b{background:var(--accent)}
.sticker:hover,.sticker:focus-visible{--peel:22px;scale:1.06}
.sticker.lifted{cursor:grabbing;--peel:30px;--s:1.12;transition:--peel .25s,scale .25s,box-shadow .25s;
  box-shadow:0 0 0 4px #fff,0 6px 10px rgba(26,21,18,.2),0 30px 40px -16px rgba(26,21,18,.6);z-index:5}
.sticker.lifted{rotate:calc(var(--r,0deg) + var(--bend,0deg))}
.hero-art{transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.enso-kanji{transition:translate .5s cubic-bezier(.2,.8,.2,1)}
@media (max-width:1000px){
  .sticker:nth-child(1){--x:64%!important;--y:53%!important}.sticker:nth-child(2){--x:62%!important;--y:92%!important}.sticker:nth-child(3){--x:2%!important;--y:90%!important}
}
@media (max-width:620px){.sticker{font-size:.82rem;padding:.4rem .7rem .4rem .45rem}.sticker b{width:1.6rem;height:1.6rem}
  .sticker:nth-child(1){--x:50%!important;--y:60%!important}.sticker:nth-child(2){--x:46%!important;--y:94%!important}}
/* peel corner on seals and kanji stickers */
.hanko,.skill-card .kanji,.hl-seal{clip-path:polygon(-12px -12px,calc(100% + 12px) -12px,calc(100% + 12px) calc(100% - var(--peel)),calc(100% - var(--peel)) calc(100% + 12px),-12px calc(100% + 12px));transition:--peel .35s cubic-bezier(.3,1.4,.5,1),rotate .35s,scale .35s}
.hanko:hover,.skill-card:hover .kanji,.hl:hover .hl-seal{--peel:14px;rotate:4deg;scale:1.06}
/* 3D tilt: cards lean toward the pointer, the shadow moves away from it and a soft sheen follows the light */
.l-steps,.l-feats,.l-skills,.l-stack,.l-doors,.l-highlights,.l-princ{perspective:1100px}
.tilt{rotate:var(--tx,0) var(--ty,0) 0 var(--ta,0deg);transition:rotate .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,scale .4s cubic-bezier(.2,.8,.2,1);will-change:rotate}
.tilt.tilting{transition:rotate .08s linear,box-shadow .2s,scale .3s;scale:1.015;box-shadow:var(--sxy,0px 0px) 40px -22px rgba(26,21,18,.5),0 2px 4px rgba(26,21,18,.06)!important}
.tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.38),transparent 55%)}
.tilt.tilting::before{opacity:1}
.tilt:active{scale:.985}
@media (prefers-reduced-motion:reduce){.tilt,.tilt.tilting{rotate:none!important;scale:none!important}.sticker{transition:none}}

.skill-img img[src$="custom.jpg"]{filter:contrast(1.45) saturate(1.3) brightness(.95)}
.skill-img img[src$="kintsugi.jpg"]{object-position:center 35%}
.skill-opt .photo.p-custom,.banner.p-custom{filter:contrast(1.45) saturate(1.3) brightness(.95)}

/* ================= app pages (dashboard, master phone, student phone) in the landing page's design ================= */
body:not(.landing){background:var(--ivory)}
body:not(.landing)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--veil-a),var(--veil-b)),url(/img/bg-fuji.jpg) center/cover no-repeat}
body:not(.landing) .top{background:var(--hdr-bg);border-bottom:0;box-shadow:0 8px 24px -22px rgba(26,21,18,.6)}
body:not(.landing) .top::after,.dash .sticky-top::after{display:none}
.dash .sticky-top{background:var(--hdr-bg);box-shadow:0 8px 24px -22px rgba(26,21,18,.6)}
.dash header.top{box-shadow:none}
.dnav{border-top:1px solid rgba(221,214,205,.6)}
/* header links as pills, like the landing page */
body:not(.landing) header.top nav{display:flex;align-items:center;gap:.4rem}
body:not(.landing) header.top nav a{color:var(--ink);font-size:.9rem;font-weight:500;padding:.35rem .85rem;border-radius:99px;border:1px solid var(--line);background:var(--paper);text-decoration:none}
body:not(.landing) header.top nav a:hover{border-color:var(--primary);color:var(--primary)}
/* one card shape and shadow everywhere */
body:not(.landing) .card,body:not(.landing) .card:nth-of-type(even){background:var(--card-bg);border-radius:2rem .6rem 2rem .6rem;box-shadow:0 18px 40px -30px rgba(26,21,18,.45)}
.phone .card{border-radius:1.6rem .5rem 1.6rem .5rem!important}
.hero{border-radius:2rem .6rem 2rem .6rem}
.tilt{position:relative}
.skill-opt,.sess-item,.join{border-radius:1.2rem .4rem 1.2rem .4rem}
/* stickers in the dashboard hero (hidden on small screens to keep it tidy) */
.app-stickers{z-index:2}
.app-stickers .sticker{font-size:.88rem}
@media (max-width:900px){.app-stickers{display:none}}
/* join codes are stickers you can peel */
details.joins>summary b,.join-code b{display:inline-block;padding:.15rem .6rem;margin-left:.4rem;border-radius:.45rem;background:#fff6e9;color:var(--primary);rotate:-2deg;
  box-shadow:0 0 0 3px #fff,0 6px 12px -6px rgba(26,21,18,.45);
  clip-path:polygon(-10px -10px,calc(100% + 10px) -10px,calc(100% + 10px) calc(100% - var(--peel)),calc(100% - var(--peel)) calc(100% + 10px),-10px calc(100% + 10px));
  transition:--peel .35s cubic-bezier(.3,1.4,.5,1),rotate .35s,scale .35s}
details.joins>summary:hover b,.join-code b:hover{--peel:10px;rotate:2deg;scale:1.05}
/* phones: the craft's kanji seal sits on the banner photo and peels when touched */
.banner{position:relative}
.banner[data-kanji]::after{content:attr(data-kanji);position:absolute;right:.9rem;bottom:-1.1rem;display:grid;place-items:center;min-width:2.9rem;height:2.9rem;padding:0 .45rem;border-radius:.45rem;
  background:var(--primary);color:#fff;font:700 1rem/1 var(--serif);rotate:-5deg;box-shadow:0 0 0 3px #fff,0 8px 16px -6px rgba(26,21,18,.55);
  clip-path:polygon(-12px -12px,calc(100% + 12px) -12px,calc(100% + 12px) calc(100% - var(--peel)),calc(100% - var(--peel)) calc(100% + 12px),-12px calc(100% + 12px));transition:--peel .35s cubic-bezier(.3,1.4,.5,1),rotate .35s}
.brief-head:hover .banner[data-kanji]::after,.brief-head:active .banner[data-kanji]::after{--peel:12px;rotate:3deg}
.brief-head{overflow:visible}.brief-head .banner{border-radius:1.6rem .5rem 0 0}
/* student: a learned lesson gets a 済 ("done") stamp */
.lesson{position:relative}
.lesson.learned::after{content:"済";position:absolute;right:1rem;bottom:1rem;display:grid;place-items:center;width:3.2rem;height:3.2rem;border:2.5px solid var(--primary);border-radius:50%;
  color:var(--primary);font:700 1.15rem/1 var(--serif);opacity:.85;rotate:-12deg;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.lesson.learned::after{animation:stamp .45s cubic-bezier(.3,1.6,.5,1)}}
@keyframes stamp{0%{scale:2.2;opacity:0}60%{scale:.92;opacity:.95}100%{scale:1;opacity:.85}}
/* student tabs and phone status as soft pills */
.tabs{background:transparent}
.tabs button{box-shadow:0 6px 14px -12px rgba(26,21,18,.6)}
.side-kv{grid-template-columns:minmax(0,1fr);gap:0}.side-kv dt{font-size:.82rem;margin-top:.5rem}.side-kv dd{margin:0}

/* uploading a video filmed with another camera */
.upload-box{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;padding:.8rem 1rem;margin:.2rem 0 1rem;border:1.5px dashed var(--line);border-radius:1.2rem .4rem 1.2rem .4rem;background:var(--surface-soft)}
.upload-box .hint{flex:1 1 16rem;margin:0}
.up-st{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-weight:600}.up-st progress{flex:1 1 10rem;height:.9rem}.up-st.err{color:var(--stop)}
.or-file{display:flex;flex-direction:column;gap:.3rem;margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--line)}
label.btn{cursor:pointer}
label.btn:has(+ input[type=file]:focus-visible){outline:3px solid #1d4ed8;outline-offset:2px}

/* ================= dark theme ================= */
:root[data-theme=dark]{color-scheme:dark;
  --ivory:#14110e;--paper:#1d1915;--washi:#29231e;--ink:#efe8de;--ink2:#b5aa9e;--line:#3d352e;--line2:#2d2722;
  --primary:#ef5a5f;--primary-h:#ff7a7e;--accent:#3e1d1d;--accent-fg:#ffa19c;--sumi:#2f2722;--sumi-fg:#f4f1ec;
  --indigo:#a9bcd0;--indigo-bg:#1f2a35;--sakura-bg:#3a2026;--red:#ef5a5f;--redbg:#3b1b1d;
  --moss:#9dc28f;--ok:#7ad8a2;--okbg:#173023;--warn:#f3c661;--warnbg:#3a2e12;--stop:#ff8f8f;
  --surface:#231e1a;--surface-soft:rgba(35,30,26,.75);--card-bg:rgba(31,27,23,.93);--hdr-bg:rgba(20,17,14,.88);--veil-a:rgba(20,17,14,.84);--veil-b:rgba(20,17,14,.93);
  --brush:#ebe2d5;--btn-bg:#c4343a;--link:#ff8a8e;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 12px 28px -16px rgba(0,0,0,.8)}
[data-theme=dark] body{background:var(--ivory)}
[data-theme=dark] .card,[data-theme=dark] .l-box,[data-theme=dark] .hl,[data-theme=dark] .door{box-shadow:0 18px 40px -28px rgba(0,0,0,.9)}
[data-theme=dark] .eyebrow,[data-theme=dark] .l-hero h1 em{color:var(--link)}
[data-theme=dark] .tabs button[aria-selected=true],[data-theme=dark].landing .top .l-nav a:first-child,[data-theme=dark] .landing .top .l-nav a:first-child{background:var(--btn-bg);border-color:var(--btn-bg)}
[data-theme=dark] .btn.danger{border-color:var(--primary);color:var(--link)}
[data-theme=dark] .btn.accent{background:#3d342d;border-color:#3d342d}
[data-theme=dark] input,[data-theme=dark] textarea,[data-theme=dark] select{border-color:#5a5047;color:var(--ink)}
[data-theme=dark] ::placeholder{color:#8b8075}
[data-theme=dark] .notice.ok{color:#bfeccf}[data-theme=dark] .notice.warn{color:#f6dd9c;border-color:#8a6a10}[data-theme=dark] .notice.bad{color:#ffc4c4;border-color:#b0444a}[data-theme=dark] .notice.info{color:#cfdcea}
[data-theme=dark] .b-bad,[data-theme=dark] .err,[data-theme=dark] .side-todo a.bad{color:#ff9a9a}
[data-theme=dark] .safety{background:#261a19}[data-theme=dark] .safety li{background:var(--surface);border-color:#5a2e30}[data-theme=dark] .safety h2,[data-theme=dark] .safety li b{color:#ff9a9a}
[data-theme=dark] .as-on_track{background:#16261c}[data-theme=dark] .as-possible_issue{background:#2c2512}[data-theme=dark] .as-cannot_assess{background:#22201f}[data-theme=dark] .as-safety_stop,[data-theme=dark] .stop-banner{background:#3a1a1c}
[data-theme=dark] .kchip,[data-theme=dark] details.kdrop{background:#1f232a;border-color:#2c3440}
[data-theme=dark] .skill-badge.s-bonsai{background:#1d2a1a}[data-theme=dark] .convert .hint,[data-theme=dark] .aprog .hint{color:#cfdcea}
[data-theme=dark] .skel{background:linear-gradient(90deg,var(--line2),#3a332d,var(--line2));background-size:200% 100%}
[data-theme=dark] .hero{background:linear-gradient(100deg,var(--paper) 0 34%,rgba(29,25,21,.8) 52%,rgba(29,25,21,.25) 80%),url(/img/bg-hero.jpg) right 40%/cover no-repeat,var(--washi)}
@media (max-width:620px){[data-theme=dark] .hero{background:linear-gradient(180deg,rgba(29,25,21,.94),rgba(29,25,21,.82)),url(/img/bg-hero.jpg) 70% 40%/cover no-repeat}}
[data-theme=dark] .skill-img img,[data-theme=dark] .skill-opt .photo,[data-theme=dark] .banner{filter:brightness(.88) saturate(.95)}
[data-theme=dark] .skill-img img[src$="custom.jpg"],[data-theme=dark] .skill-opt .photo.p-custom,[data-theme=dark] .banner.p-custom{filter:invert(.88) hue-rotate(180deg) contrast(1.2)}
[data-theme=dark] .l-ink{box-shadow:inset 0 0 0 1px #3d352e}
[data-theme=dark] .l-cta-box{background:#a8272c}
[data-theme=dark] .wash-red{opacity:.4}
[data-theme=dark] .tilt::before{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.1),transparent 55%)}
[data-theme=dark] .qr,[data-theme=dark] .entry-qr img{background:#fff}
[data-theme=dark] video{background:#000}
[data-theme=dark] .kback{background:rgba(0,0,0,.5)}
[data-theme=dark] .kpanel{box-shadow:-8px 0 30px rgba(0,0,0,.6)}
[data-theme=dark] .s-cream{background:#3a2c22;color:#ffb9a6}[data-theme=dark] .s-cream b{background:rgba(255,255,255,.12)}
[data-theme=dark] .sticker{box-shadow:0 0 0 4px #f4efe7,0 2px 3px rgba(0,0,0,.4),0 12px 22px -12px rgba(0,0,0,.9)}
[data-theme=dark] .hl-seal.light,[data-theme=dark] details.joins>summary b,[data-theme=dark] .join-code b{background:#2b221c}
[data-theme=dark] .credits{background:rgba(29,25,21,.8)}
[data-theme=dark] .badge.b-warn{color:var(--warn)}
[data-theme=dark] .door .btn.primary{background:var(--btn-bg);border-color:var(--btn-bg);color:#fff}
[data-theme=dark] .dnav .n{color:var(--warn)}[data-theme=dark] .dnav .n.bad{color:#ff9a9a}
/* the theme switch, next to the language switch in every header */
.theme-toggle{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;padding:0;margin-left:.4rem;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer}
.theme-toggle svg{width:1.15rem;height:1.15rem}
.theme-toggle:hover{border-color:var(--primary);color:var(--primary)}
header.top nav + .theme-toggle{margin-left:.6rem}
.theme-toggle + .lang-toggle{margin-left:.4rem}
html{transition:none}

/* ================= Practice Lab (experiment): a small 3D workbench in the browser ================= */
.lab-go{gap:.5rem}
.lab-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.3rem 0}
.lab-prog{list-style:none;display:flex;gap:.35rem;padding:0;margin:.4rem 0 .8rem}
.lab-prog li{flex:1;height:.45rem;border-radius:99px;background:var(--line)}.lab-prog li.done{background:var(--ok)}.lab-prog li.now{background:var(--primary)}
.lab-choices{display:grid;gap:.8rem}
.lab-choice{display:flex;gap:.9rem;align-items:center;text-align:left;padding:1rem;border:1px solid var(--line);border-radius:1.2rem .4rem 1.2rem .4rem;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:translate .2s,box-shadow .2s}
.lab-choice:hover:not(:disabled){translate:0 -2px;box-shadow:0 14px 26px -18px rgba(26,21,18,.6)}.lab-choice:disabled{opacity:.6;cursor:not-allowed}
.lab-choice b{display:block;font:700 1.08rem/1.3 var(--serif)}.lab-choice small{display:block;color:var(--ink2);font-size:.9rem;margin-top:.15rem}
.lab-ico{display:grid;place-items:center;flex:none;width:3.2rem;height:3.2rem;border-radius:.5rem;background:var(--primary);color:#fff;font:700 1.4rem/1 var(--serif);rotate:-4deg}
.lab-say{font-size:1.05rem}
.lab-clip video{margin-top:.5rem}
/* the scene: perspective room, tilting with the phone or mouse */
.lab-scene{position:relative;height:clamp(20rem,82vw,25rem);perspective:900px;margin:0 0 .8rem;border-radius:1.6rem .5rem 1.6rem .5rem;overflow:hidden;
  background:linear-gradient(180deg,#e9dcc8 0 46%,#c9a77c 46% 100%);box-shadow:inset 0 0 0 1px var(--line),0 18px 36px -26px rgba(26,21,18,.6);touch-action:pan-y}
.lab-room{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.lab-wall{position:absolute;left:8%;right:8%;top:6%;height:36%;transform:translateZ(-60px);border-radius:.4rem;
  background:repeating-linear-gradient(90deg,#f5ecdd 0 46px,#eadcc6 46px 48px);box-shadow:0 8px 18px -10px rgba(0,0,0,.35)}
.lab-noren{position:absolute;left:50%;top:0;translate:-50% 0;padding:.4rem 1.4rem 1.2rem;background:#3a4a5c;color:#f4f1ec;font:700 1.05rem/1 var(--serif);letter-spacing:.3em;border-radius:0 0 .3rem .3rem;
  clip-path:polygon(0 0,100% 0,100% 100%,66% 100%,66% 72%,34% 72%,34% 100%,0 100%)}
.lab-counter{position:absolute;left:0;right:0;bottom:0;height:58%;transform:translateZ(0);display:grid;place-items:start center;padding-top:.6rem}
.lab-board{width:min(70%,22rem);height:34%;min-height:4.2rem;display:grid;place-items:center;border-radius:.8rem;background:linear-gradient(135deg,#f3d9a8,#e2bb7d);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.08),0 14px 18px -10px rgba(0,0,0,.45);transform:translateZ(30px) rotateX(18deg);transition:box-shadow .2s,scale .2s;outline:3px dashed transparent;outline-offset:4px}
.lab-board .hint{color:#6b5236;font-weight:600}
.lab-board.over{outline-color:var(--primary);scale:1.04}
.lab-placed{font-size:3rem;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35))}
.lab-placed.pop{animation:lab-pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes lab-pop{0%{scale:.2;translate:0 -60px}100%{scale:1;translate:0 0}}
.lab-shelf{position:absolute;left:0;right:0;bottom:.6rem;display:flex;justify-content:center;gap:.6rem;padding:0 .6rem;transform:translateZ(70px)}
.lab-shelf.fade{opacity:.4;pointer-events:none;transition:opacity .3s}
.lab-item{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:5.4rem;max-width:8rem;padding:.45rem .5rem;border:0;border-radius:.9rem;background:var(--paper);color:var(--ink);font:inherit;cursor:grab;touch-action:none;
  box-shadow:0 0 0 3px #fff,0 10px 16px -8px rgba(0,0,0,.5);animation:lab-in .5s var(--d) both cubic-bezier(.2,.8,.2,1);transition:scale .2s,box-shadow .2s,rotate .2s}
.lab-item:hover{scale:1.06;rotate:-2deg}
.lab-item.lifted{cursor:grabbing;scale:1.15;z-index:5;transition:none;box-shadow:0 0 0 3px #fff,0 26px 30px -12px rgba(0,0,0,.55)}
.lab-emoji{font-size:1.9rem;line-height:1.1}.lab-name{font-size:.78rem;font-weight:600;line-height:1.2;text-align:center}
@keyframes lab-in{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
.lab-scene.shake{animation:lab-shake .4s}.lab-card.shake{animation:lab-shake .4s}
@keyframes lab-shake{20%{translate:-8px 0}40%{translate:7px 0}60%{translate:-5px 0}80%{translate:3px 0}}
.lab-scene.press .lab-board{scale:.96 .9}
.lab-task{font-weight:600;text-align:center}
.lab-quiz{display:flex;flex-direction:column;gap:.55rem}.lab-quiz h3{margin:0 0 .2rem}
.lab-opt{justify-content:flex-start;text-align:left}.lab-opt.right{border-color:var(--ok);background:var(--okbg);color:var(--ok)}
.lab-tap.pop{animation:lab-pop2 .25s}@keyframes lab-pop2{50%{scale:1.08}}
.lab-gauge{position:relative;height:1.3rem;border-radius:99px;background:var(--line2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.lab-zone{position:absolute;left:45%;width:30%;top:0;bottom:0;background:rgba(45,106,79,.35)}
.lab-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--primary),#f08a5d);opacity:.85}
.lab-hold{user-select:none;-webkit-user-select:none;touch-action:none}
.lab-fb{min-height:1.6rem;font-weight:700;margin:.3rem 0 1rem}.lab-fb.good{color:var(--ok)}.lab-fb.bad{color:var(--stop)}
.lab-order{display:flex;flex-wrap:wrap;gap:.5rem}.lab-card.used{opacity:.45}
.lab-seq{margin:.8rem 0 0;padding-left:1.4rem}.lab-seq li{padding:.15rem 0;font-weight:600}
.lab-stars{font-size:2.2rem;letter-spacing:.2rem;color:#e8a317;margin:.2rem 0}
.lab-confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.lab-confetti span{position:absolute;top:-1rem;width:.6rem;height:.9rem;border-radius:2px;background:hsl(var(--h) 80% 60%);animation:lab-fall 2.2s var(--d) ease-in forwards}
@keyframes lab-fall{to{translate:0 110vh;rotate:540deg}}
[data-theme=dark] .lab-scene{background:linear-gradient(180deg,#3a3129 0 46%,#5b4330 46% 100%)}
[data-theme=dark] .lab-wall{background:repeating-linear-gradient(90deg,#4a3f35 0 46px,#433930 46px 48px)}
[data-theme=dark] .lab-board .hint{color:#4a3520}
@media (prefers-reduced-motion:reduce){.lab-room{transition:none;transform:none}.lab-item,.lab-placed.pop{animation:none}.lab-scene.shake,.lab-card.shake{animation:none}}
@media (max-width:420px){.lab-item{min-width:4.6rem}.lab-name{font-size:.72rem}}