/* global React */
/* 06 · PROTOTYPE LAB / VIBE CODING — "PERSONAL TOOL DRAWER" (个人工具实验室).
   A Coquette / French-romantic / Victorian-revival workbench of tiny tools the
   author built for repeated personal needs. Light blush-cream theme, lace &
   script flourishes, scallop frames. Self-contained: injects its own CSS and
   exposes window.LabSections. Lives inside the dark detail overlay (.pd-card-lab
   recolours the shell to cream paper). */
(function () {
  const { useState, useEffect } = React;

  const LAB_TOOLS = [
    {
      id: "xiaozhang", no: "01",
      name: "小账", en: "Coze Agent · 算账助手",
      one: "一个帮我把模糊消费、报价和账目问题拆成具体数字的生活算账 Agent。",
      tags: ["Coze Agent", "Life Utility", "Finance Helper"],
      status: "IN USE",
      shot: "assets/lab/tool-xiaozhang.png", fit: "cover", pos: "top",
      blocks: [
        ["Why I made it", "我经常需要计算报价、成本、开销和生活账目，所以做了一个可以像朋友一样沟通的算账助手。"],
        ["What it does", "把模糊的需求拆成数字，帮助估算成本、预算、报价和账目。"],
        ["Product Thinking", "它不是冰冷表格，而是一个能用短句沟通的计算助手，降低我开始算账的心理门槛。"],
        ["Next Iteration", "未来可以加入固定模板，例如视频报价、网店成本、旅行预算和月度支出总结。"],
      ],
    },
    {
      id: "radar", no: "02",
      name: "Visual Inspiration Radar", en: "视觉灵感雷达",
      one: "一个用来整理视觉趋势、审美关键词和创作判断的灵感观察工具。",
      tags: ["Visual Research", "Trend Notes", "Creative Radar"],
      status: "IN USE",
      shot: "assets/lab/tool-radar.png", fit: "cover", pos: "top",
      blocks: [
        ["Why I made it", "我经常需要判断最近流行什么视觉语言，所以把观察到的审美趋势整理成固定格式。"],
        ["What it does", "记录视觉关键词、趋势判断、案例链接和下一步创作建议。"],
        ["Product Thinking", "它把「我觉得好看」变成可复盘的审美判断：关键词、理由、适用场景、下一步方向。"],
        ["Next Iteration", "未来可以做成 AIHOT / 视觉热点监控系统，自动整理小红书、Pinterest、B 站等平台的趋势信号。"],
      ],
    },
    {
      id: "lora", no: "03",
      name: "Style Model Test", en: "LoRA 模型实验",
      sub: "Danganronpa-style LoRA Experiment on Liblib",
      one: "在 Liblib 上进行弹丸论破一代立绘风格的 LoRA 测试，用于验证角色立绘风格复现、人物差异控制与视觉一致性。",
      tags: ["LoRA Training", "Anime Style", "Character Consistency", "Liblib"],
      status: "EXPERIMENT",
      shot: "assets/lab/tool-lora.png", fit: "cover", pos: "top",
      blocks: [
        ["Why I made it", "我想测试 AI 是否能稳定复现一种明确的角色立绘风格，而不是只生成单张好看的图。"],
        ["What it does", "通过 LoRA 模型测试，让不同角色在同一视觉体系下保持相似的线条、比例、上色方式和立绘气质。"],
        ["Product Thinking", "对创作者来说，真正有价值的不是单张图片，而是一套可持续复用的视觉系统。"],
      ],
    },
    {
      id: "myroom", no: "04",
      name: "My Room", en: "我的房间",
      one: "一个偏女性向的情绪日记 app，用来记录心情、抽卡、写日记和安放小事。",
      tags: ["Emotional Utility", "Diary Tool", "Personal Space"],
      status: "PROTOTYPE",
      shot: "assets/lab/tool-myroom.png", fit: "cover", pos: "top",
      blocks: [
        ["Why I made it", "有些情绪不适合直接发朋友圈，也不一定需要解决，只是需要被放进一个温柔的空间。"],
        ["What it does", "提供日记、占卜、旧信盒、钥匙等模块，让用户整理情绪和记录生活。"],
        ["Product Thinking", "它把「情绪记录」做成一个空间，而不是一个输入框，让用户更愿意停留和表达。"],
        ["Next Iteration", "未来可以加入长期记忆、心情趋势、角色陪伴和每日小任务。"],
      ],
    },
    {
      id: "ocmart", no: "05",
      name: "OC MART", en: "货品超市 · Prompt Engine",
      one: "一个把角色风格、服装关键词和画面需求组合成 Prompt 的 OC 混搭工具。",
      tags: ["Prompt Engine", "Creator Tool", "OC Workflow"],
      status: "PROTOTYPE",
      shot: "assets/lab/tool-ocmart.png", fit: "cover", pos: "top",
      blocks: [
        ["Why I made it", "我经常需要为 OC、服设和 AI 绘图整理关键词，所以想做一个像超市一样挑选标签的 Prompt 工具。"],
        ["What it does", "用户可以选择画质、风格、服装、艺术流派、角色气质等标签，组合出可复制的 Prompt。"],
        ["Product Thinking", "它把复杂的 Prompt 写作拆成可点击、可组合的模块，降低创作者使用 AI 绘图的门槛。"],
        ["Next Iteration", "未来可以加入角色档案保存、Prompt 历史记录、随机搭配和一键导出。"],
      ],
    },
    {
      id: "tarotcat", no: "06",
      name: "Tarot Cat", en: "塔罗主喵",
      one: "一个用猫咪人格陪伴用户抽牌、解释情绪和记录问题的 GPT 小工具。",
      tags: ["GPTs", "Tarot Companion", "Emotional Agent"],
      status: "IN USE",
      shot: "assets/lab/tool-tarotcat.png", fit: "contain", pos: "center",
      blocks: [
        ["Why I made it", "我想做一个不像传统占卜师那么严肃，而是像猫咪朋友一样陪人聊天的塔罗工具。"],
        ["What it does", "帮助用户抽牌、解释问题、整理情绪，并用更轻松的语言给出反馈。"],
        ["Product Thinking", "它的重点不是预测未来，而是用塔罗作为对话入口，帮助用户整理混乱的想法。"],
        ["Next Iteration", "未来可以加入日记记录、长期问题追踪、每日牌卡和用户情绪记忆。"],
      ],
    },
  ];

  const PROVES_TAGS = [
    "Product Thinking", "Vibe Coding", "AI Workflow", "Prompt System",
    "Prototype Design", "Personal Utility", "Creator Tools",
  ];

  // little decorative bow drawn in CSS-friendly inline svg
  function Bow({ cls }) {
    return (
      <svg className={cls} viewBox="0 0 48 30" fill="none" aria-hidden="true">
        <path d="M24 15c-6-9-21-12-22-3 0 7 12 9 22 3Zm0 0c6-9 21-12 22-3 0 7-12 9-22 3Z"
          fill="currentColor" opacity=".18" />
        <path d="M24 15c-6-9-21-12-22-3 0 7 12 9 22 3Zm0 0c6-9 21-12 22-3 0 7-12 9-22 3Z"
          stroke="currentColor" strokeWidth="1.3" />
        <circle cx="24" cy="15" r="3.2" fill="currentColor" opacity=".22" stroke="currentColor" strokeWidth="1.3" />
        <path d="M22 17c-3 5-5 8-7 10M26 17c3 5 5 8 7 10" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
      </svg>
    );
  }

  function StatusDot({ s }) {
    const k = s === "IN USE" ? "use" : s === "EXPERIMENT" ? "exp" : "proto";
    return <span className={"lab-status " + k}><i />{s}</span>;
  }

  function LabSections() {
    const [open, setOpen] = useState(null); // tool id
    const tool = LAB_TOOLS.find((t) => t.id === open) || null;

    useEffect(() => {
      const onKey = (e) => { if (e.key === "Escape") setOpen(null); };
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }, []);

    return (
      <div className="lab">
        {/* ===== 01 HERO ===== */}
        <header className="lab-hero">
          <div className="lab-hero-l">
            <div className="lab-eyebrow">06 — Prototype Lab · Vibe Coding</div>
            <h1 className="lab-title">Prototype Lab</h1>
            <div className="lab-title-cn">个人工具实验室</div>
            <div className="lab-sub">
              <div className="en">Small tools I built for repeated personal needs.</div>
              <div className="zh">把反复出现的小需求，做成可以自己使用的小工具。</div>
            </div>
            <p className="lab-lede">
              这些不是大型产品，而是我为自己的生活、创作、经营和情绪整理做过的微型原型。
              它们来自真实的个人需求：算账、找灵感、整理角色、记录心情、生成 Prompt、占卜陪伴。
            </p>
            <div className="lab-quote">
              <Bow cls="lab-quote-bow" />
              I build tiny tools for the problems I meet again and again.
              <span>我把反复遇到的问题，做成自己能用的小工具。</span>
            </div>
          </div>

          {/* floating tool windows / vanity tray */}
          <div className="lab-hero-r" aria-hidden="true">
            <div className="lab-tray">
              <span className="lab-tray-label">personal tool drawer</span>
              <div className="lab-float f1"><img src="assets/lab/tool-myroom.png" alt="" loading="lazy" /></div>
              <div className="lab-float f2"><img src="assets/lab/tool-ocmart.png" alt="" loading="lazy" /></div>
              <div className="lab-float f3"><img src="assets/lab/tool-radar.png" alt="" loading="lazy" /></div>
              <Bow cls="lab-float-bow b1" />
              <Bow cls="lab-float-bow b2" />
              <span className="lab-heart h1">♡</span>
              <span className="lab-heart h2">♡</span>
            </div>
          </div>
        </header>

        {/* ===== 02 TOOL SHELF ===== */}
        <section className="lab-shelf-wrap">
          <div className="lab-shelf-head">
            <span className="lab-shelf-kick">Tool Shelf · 工具架</span>
            <span className="lab-shelf-line" />
            <span className="lab-shelf-count">{String(LAB_TOOLS.length).padStart(2, "0")} tiny tools</span>
          </div>

          <div className="lab-shelf">
            {LAB_TOOLS.map((t) => (
              <button className="lab-card" key={t.id} onClick={() => setOpen(t.id)}>
                <div className="lab-card-win">
                  <span className="lab-win-dots"><i /><i /><i /></span>
                  <span className="lab-card-no">{t.no}</span>
                  <div className={"lab-shot " + t.fit} style={{ backgroundImage: `url(${t.shot})`, backgroundPosition: t.pos === "top" ? "center top" : "center" }} />
                </div>
                <div className="lab-card-body">
                  <div className="lab-card-top">
                    <h3 className="lab-card-name">{t.name}</h3>
                    <StatusDot s={t.status} />
                  </div>
                  <div className="lab-card-en">{t.en}</div>
                  <p className="lab-card-one">{t.one}</p>
                  <div className="lab-card-tags">
                    {t.tags.map((tag) => <span key={tag}>{tag}</span>)}
                  </div>
                  <div className="lab-card-more">View Details <span className="ar">→</span></div>
                </div>
              </button>
            ))}
          </div>
        </section>

        {/* ===== 04 WHAT THIS PROJECT PROVES ===== */}
        <section className="lab-proves">
          <div className="lab-proves-rule"><Bow cls="lab-proves-bow" /></div>
          <div className="lab-proves-kick">What this project proves</div>
          <h2 className="lab-proves-h">这个项目证明了什么</h2>
          <p className="lab-proves-body">
            这组小工具展示了我如何从真实生活和创作需求出发，把模糊问题拆成可使用的微型产品原型。
          </p>
          <div className="lab-proves-tags">
            {PROVES_TAGS.map((t) => <span key={t}>{t}</span>)}
          </div>
          <div className="lab-proves-foot">
            <span className="seal">06</span>
            <span>End of file · 个人工具实验室 · Personal Tool Drawer</span>
          </div>
        </section>

        {/* ===== DETAIL DRAWER ===== */}
        <div className={"lab-drawer-scrim" + (tool ? " on" : "")} onClick={() => setOpen(null)} />
        <aside className={"lab-drawer" + (tool ? " on" : "")} aria-hidden={!tool}>
          {tool && (
            <div className="lab-drawer-in" key={tool.id}>
              <div className="lab-drawer-bar">
                <span className="lab-drawer-tag">Tool {tool.no} · Detail</span>
                <button className="lab-drawer-x" onClick={() => setOpen(null)} aria-label="Close">✕</button>
              </div>
              <div className="lab-drawer-scroll">
                <StatusDot s={tool.status} />
                <h3 className="lab-d-name">{tool.name}</h3>
                <div className="lab-d-en">{tool.en}</div>
                {tool.sub && <div className="lab-d-sub">{tool.sub}</div>}
                <p className="lab-d-one">{tool.one}</p>

                <div className={"lab-d-shot " + tool.fit} style={{ backgroundImage: `url(${tool.shot})`, backgroundPosition: tool.pos === "top" ? "center top" : "center" }} />

                <div className="lab-d-tags">
                  {tool.tags.map((tag) => <span key={tag}>{tag}</span>)}
                </div>

                <div className="lab-d-blocks">
                  {tool.blocks.map(([k, v]) => (
                    <div className="lab-d-block" key={k}>
                      <div className="lab-d-k">{k}</div>
                      <p className="lab-d-v">{v}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </aside>
      </div>
    );
  }

  const LAB_CSS = `
  @import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

  /* recolour the dark detail shell into blush-cream paper for THIS file only */
  .pd-card-lab, .pd-card-lab .pd-scroll{ background:#fbf3ee !important; }
  .pd-card-lab .pd-scroll{
    background-image:
      radial-gradient(120% 60% at 85% -8%, rgba(196,112,138,.16), transparent 55%),
      radial-gradient(90% 50% at 5% 110%, rgba(169,155,200,.14), transparent 60%),
      linear-gradient(rgba(196,112,138,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(196,112,138,.05) 1px, transparent 1px) !important;
    background-size:auto, auto, 30px 30px, 30px 30px !important;
  }
  .pd-card-lab{ box-shadow:0 0 0 1px rgba(196,112,138,.3), 0 40px 120px rgba(0,0,0,.55) !important; }
  .pd-card-lab .pd-bar{
    background:linear-gradient(180deg, rgba(251,243,238,.96), rgba(251,243,238,.5)) !important;
    border-bottom:1.4px solid rgba(168,82,116,.45) !important;
  }
  .pd-card-lab .pd-tag{ color:#a85274 !important; font-family:'Playfair Display',serif !important; font-style:italic; letter-spacing:.04em; }
  .pd-card-lab .pd-x{ background:#c4708a !important; color:#fff !important; box-shadow:0 0 18px -6px #c4708a !important; }

  .lab{
    --cream:#fbf3ee; --paper:#fffaf5; --blush:#c4708a; --blush-deep:#a85274;
    --pink-soft:#f4d8df; --pink-line:#e7bfcb; --lav:#a99bc8; --denim:#8095bb;
    --ink:#3c2e3a; --muted:#9b8893;
    --script:'Pinyon Script',cursive; --serif:'Playfair Display',serif; --body:'EB Garamond',Georgia,serif;
    position:relative; color:var(--ink); font-family:var(--body);
    padding:clamp(28px,4vw,64px) clamp(22px,5vw,84px) clamp(60px,8vh,110px);
    -webkit-font-smoothing:antialiased;
  }
  .lab *{ box-sizing:border-box; }

  /* ---------- HERO ---------- */
  .lab-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,72px); align-items:center;
    padding-bottom:clamp(34px,5vh,60px); margin-bottom:clamp(30px,4vh,52px);
    border-bottom:1.4px solid var(--pink-line); }
  .lab-eyebrow{ font-family:var(--serif); font-style:italic; font-size:14px; letter-spacing:.04em; color:var(--blush-deep); margin-bottom:10px; }
  .lab-title{ font-family:var(--script); font-weight:400; font-size:clamp(64px,9vw,128px); line-height:.82;
    color:var(--ink); margin:0; }
  .lab-title-cn{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.4vw,34px); color:var(--blush-deep);
    margin:6px 0 0; letter-spacing:.16em; }
  .lab-sub{ margin:clamp(16px,2.4vh,26px) 0 0; }
  .lab-sub .en{ font-family:var(--serif); font-style:italic; font-size:clamp(16px,1.5vw,20px); color:var(--ink); }
  .lab-sub .zh{ font-size:clamp(15px,1.4vw,18px); color:#6f5d68; margin-top:4px; letter-spacing:.02em; }
  .lab-lede{ font-size:clamp(15px,1.35vw,17.5px); line-height:1.85; color:#6f5d68; max-width:50ch; margin:clamp(16px,2.2vh,24px) 0 0; text-wrap:pretty; }
  .lab-quote{ position:relative; margin-top:clamp(20px,3vh,30px); padding:16px 20px 16px 22px;
    background:rgba(255,250,245,.7); border:1.3px solid var(--pink-line); border-radius:4px 16px 4px 16px;
    font-family:var(--serif); font-style:italic; font-size:clamp(15px,1.45vw,18.5px); color:var(--blush-deep); line-height:1.5; max-width:46ch; }
  .lab-quote span{ display:block; font-family:var(--body); font-style:normal; font-size:14.5px; color:#7c6a75; margin-top:6px; letter-spacing:.02em; }
  .lab-quote-bow{ position:absolute; top:-15px; left:18px; width:42px; height:26px; color:var(--blush); }

  .lab-hero-r{ position:relative; min-height:380px; }
  .lab-tray{ position:relative; height:100%; min-height:380px;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(244,216,223,.7), transparent 70%),
      linear-gradient(155deg, #fff7f2, #f7e9ec);
    border:1.4px solid var(--pink-line); border-radius:22px;
    box-shadow:0 24px 60px -28px rgba(168,82,116,.4), inset 0 0 0 6px rgba(255,255,255,.5); overflow:hidden; }
  .lab-tray-label{ position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:6;
    font-family:var(--script); font-size:30px; color:var(--blush); white-space:nowrap; }
  .lab-float{ position:absolute; border-radius:12px; overflow:hidden; background:#fff;
    border:5px solid #fff; box-shadow:0 18px 40px -16px rgba(60,46,58,.5); }
  .lab-float img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
  .lab-float.f1{ width:54%; aspect-ratio:16/10; left:8%; top:24%; transform:rotate(-6deg); z-index:3; }
  .lab-float.f2{ width:46%; aspect-ratio:16/11; right:7%; top:14%; transform:rotate(5deg); z-index:2; }
  .lab-float.f3{ width:44%; aspect-ratio:16/10; right:14%; bottom:9%; transform:rotate(-3deg); z-index:4; }
  .lab-float-bow{ position:absolute; width:50px; height:32px; color:var(--blush-deep); z-index:5; }
  .lab-float-bow.b1{ top:20%; left:5%; transform:rotate(-12deg); }
  .lab-float-bow.b2{ bottom:6%; right:8%; transform:rotate(10deg); }
  .lab-heart{ position:absolute; color:var(--blush); z-index:5; font-size:22px; }
  .lab-heart.h1{ top:48%; right:4%; }
  .lab-heart.h2{ bottom:30%; left:6%; font-size:15px; color:var(--lav); }

  /* ---------- SHELF ---------- */
  .lab-shelf-head{ display:flex; align-items:center; gap:18px; margin-bottom:clamp(20px,3vh,30px); }
  .lab-shelf-kick{ font-family:var(--script); font-size:clamp(30px,3.4vw,46px); color:var(--blush-deep); line-height:1; }
  .lab-shelf-line{ flex:1; height:1.4px; background:repeating-linear-gradient(90deg, var(--pink-line) 0 8px, transparent 8px 14px); }
  .lab-shelf-count{ font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--muted); letter-spacing:.04em; }

  .lab-shelf{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,30px); }
  .lab-card{ text-align:left; cursor:pointer; font:inherit; color:inherit; padding:14px; border:none;
    background:var(--paper); border-radius:18px; position:relative;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 18px 44px -26px rgba(168,82,116,.45);
    outline:1.3px solid var(--pink-line); outline-offset:0;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, outline-color .35s; }
  .lab-card::after{ content:""; position:absolute; inset:5px; border-radius:13px; border:1px solid rgba(231,191,203,.55); pointer-events:none; }
  .lab-card:hover{ transform:translateY(-7px); outline-color:var(--blush);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 30px 60px -28px rgba(168,82,116,.6), 0 0 0 3px rgba(244,216,223,.6); }
  .lab-card:active{ transform:translateY(-3px) scale(.995); }

  .lab-card-win{ position:relative; border-radius:12px; overflow:hidden; background:#f3e6ea;
    border:1px solid var(--pink-line); aspect-ratio:16/10; }
  .lab-win-dots{ position:absolute; top:9px; left:11px; z-index:3; display:flex; gap:5px; }
  .lab-win-dots i{ width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(168,82,116,.3); }
  .lab-win-dots i:nth-child(1){ background:#e9a7b9; } .lab-win-dots i:nth-child(2){ background:#dcc6a0; } .lab-win-dots i:nth-child(3){ background:#a9c0a8; }
  .lab-card-no{ position:absolute; top:8px; right:11px; z-index:3; font-family:var(--serif); font-style:italic; font-size:15px;
    color:#fff; text-shadow:0 1px 4px rgba(60,46,58,.5); }
  .lab-shot{ position:absolute; inset:0; background-size:cover; background-repeat:no-repeat;
    transition:transform .5s cubic-bezier(.2,.8,.2,1); }
  .lab-shot.contain{ background-size:contain; background-color:#f7e7ec;
    background-image:radial-gradient(120% 100% at 50% 0%, #fdeef1, #f3dbe1) , var(--bg); }
  .lab-card:hover .lab-shot{ transform:scale(1.045); }

  .lab-card-body{ padding:13px 6px 5px; }
  .lab-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .lab-card-name{ font-family:var(--serif); font-weight:600; font-size:clamp(18px,1.7vw,22px); margin:0; color:var(--ink); line-height:1.15; }
  .lab-card-en{ font-size:13.5px; color:var(--blush-deep); letter-spacing:.02em; margin-top:2px; }
  .lab-card-one{ font-size:14px; line-height:1.6; color:#6f5d68; margin:9px 0 11px; text-wrap:pretty; }
  .lab-card-tags{ display:flex; flex-wrap:wrap; gap:6px; }
  .lab-card-tags span{ font-family:var(--body); font-size:11.5px; letter-spacing:.02em; color:var(--blush-deep);
    background:rgba(244,216,223,.5); border:1px solid var(--pink-line); padding:3px 9px; border-radius:999px; }
  .lab-card-more{ margin-top:13px; font-family:var(--serif); font-style:italic; font-size:14px; color:var(--muted);
    display:flex; align-items:center; gap:7px; transition:color .3s; }
  .lab-card-more .ar{ transition:transform .3s; }
  .lab-card:hover .lab-card-more{ color:var(--blush-deep); }
  .lab-card:hover .lab-card-more .ar{ transform:translateX(4px); }

  /* status badge */
  .lab-status{ flex:none; display:inline-flex; align-items:center; gap:6px; font-family:var(--body); font-size:11px;
    letter-spacing:.12em; padding:4px 10px; border-radius:999px; white-space:nowrap; }
  .lab-status i{ width:6px; height:6px; border-radius:50%; }
  .lab-status.use{ color:#3f7a52; background:rgba(160,196,168,.28); border:1px solid rgba(63,122,82,.4); }
  .lab-status.use i{ background:#3f7a52; box-shadow:0 0 7px #3f7a52; }
  .lab-status.exp{ color:#7d5aa6; background:rgba(169,155,200,.26); border:1px solid rgba(125,90,166,.42); }
  .lab-status.exp i{ background:#7d5aa6; }
  .lab-status.proto{ color:var(--blush-deep); background:rgba(244,216,223,.6); border:1px solid var(--pink-line); }
  .lab-status.proto i{ background:var(--blush); }

  /* ---------- PROVES ---------- */
  .lab-proves{ margin-top:clamp(48px,7vh,84px); text-align:center; }
  .lab-proves-rule{ position:relative; height:1.4px; background:repeating-linear-gradient(90deg, var(--pink-line) 0 8px, transparent 8px 14px);
    margin:0 auto clamp(26px,4vh,42px); max-width:680px; }
  .lab-proves-bow{ position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:54px; height:34px; color:var(--blush); background:var(--cream); padding:0 8px; }
  .lab-proves-kick{ font-family:var(--serif); font-style:italic; font-size:15px; letter-spacing:.05em; color:var(--blush-deep); }
  .lab-proves-h{ font-family:var(--script); font-weight:400; font-size:clamp(40px,5.5vw,72px); color:var(--ink); margin:4px 0 0; line-height:1; }
  .lab-proves-body{ font-size:clamp(15px,1.4vw,18px); line-height:1.8; color:#6f5d68; max-width:60ch; margin:clamp(16px,2.4vh,24px) auto 0; text-wrap:pretty; }
  .lab-proves-tags{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:clamp(20px,3vh,30px) auto 0; max-width:760px; }
  .lab-proves-tags span{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--blush-deep);
    background:rgba(255,250,245,.8); border:1.2px solid var(--pink-line); padding:7px 16px; border-radius:999px; }
  .lab-proves-foot{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:clamp(28px,4vh,44px);
    font-family:var(--body); font-size:12.5px; letter-spacing:.08em; color:var(--muted); }
  .lab-proves-foot .seal{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
    border:1.4px solid var(--blush); color:var(--blush-deep); font-family:var(--script); font-size:24px; }

  /* ---------- DRAWER ---------- */
  .lab-drawer-scrim{ position:fixed; inset:0; z-index:240; background:rgba(60,46,58,.34); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .4s; }
  .lab-drawer-scrim.on{ opacity:1; pointer-events:auto; }
  .lab-drawer{ position:fixed; top:0; right:0; height:100%; width:min(480px,94vw); z-index:241;
    background:linear-gradient(180deg,#fffaf5,#fbeef0); border-left:1.6px solid var(--blush);
    box-shadow:-30px 0 80px -30px rgba(60,46,58,.5);
    transform:translateX(102%); transition:transform .46s cubic-bezier(.2,.85,.2,1); display:flex; flex-direction:column; }
  .lab-drawer.on{ transform:translateX(0); }
  .lab-drawer-bar{ flex:none; display:flex; align-items:center; justify-content:space-between; padding:16px 22px;
    border-bottom:1.3px solid var(--pink-line); background:rgba(255,250,245,.7); }
  .lab-drawer-tag{ font-family:var(--serif); font-style:italic; font-size:13.5px; letter-spacing:.05em; color:var(--blush-deep); }
  .lab-drawer-x{ width:34px; height:34px; border-radius:50%; border:1.3px solid var(--blush); background:#fff; color:var(--blush-deep);
    font-size:14px; cursor:pointer; transition:background .25s,color .25s; }
  .lab-drawer-x:hover{ background:var(--blush); color:#fff; }
  .lab-drawer-scroll{ flex:1; overflow-y:auto; padding:clamp(20px,3vw,30px) clamp(20px,3vw,32px) 48px; }
  .lab-drawer-scroll::-webkit-scrollbar{ width:8px; } .lab-drawer-scroll::-webkit-scrollbar-thumb{ background:var(--blush); border-radius:4px; }
  .lab-drawer-in{ animation:labfade .5s both; }
  @keyframes labfade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

  .lab-d-name{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.2vw,36px); color:var(--ink); margin:12px 0 0; line-height:1.1; }
  .lab-d-en{ font-size:15px; color:var(--blush-deep); letter-spacing:.02em; margin-top:3px; }
  .lab-d-sub{ font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--muted); margin-top:4px; }
  .lab-d-one{ font-size:15.5px; line-height:1.7; color:#6f5d68; margin:14px 0 18px; text-wrap:pretty; }
  .lab-d-shot{ width:100%; aspect-ratio:16/10; border-radius:14px; border:5px solid #fff; background-size:cover; background-repeat:no-repeat;
    box-shadow:0 18px 44px -22px rgba(168,82,116,.55); }
  .lab-d-shot.contain{ background-size:contain; background-color:#f7e7ec; }
  .lab-d-tags{ display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 4px; }
  .lab-d-tags span{ font-size:12px; color:var(--blush-deep); background:rgba(244,216,223,.55); border:1px solid var(--pink-line); padding:4px 11px; border-radius:999px; }
  .lab-d-blocks{ margin-top:14px; }
  .lab-d-block{ padding:16px 0; border-top:1px solid var(--pink-line); }
  .lab-d-block:first-child{ border-top:none; }
  .lab-d-k{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:15px; color:var(--blush-deep); margin-bottom:6px; }
  .lab-d-v{ font-size:15px; line-height:1.75; color:#5f4e5a; margin:0; text-wrap:pretty; }

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .lab-hero{ grid-template-columns:1fr; }
    .lab-hero-r{ order:-1; min-height:300px; }
    .lab-shelf{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:620px){
    .lab-shelf{ grid-template-columns:1fr; }
    .lab-hero-r{ min-height:260px; }
    .lab-title{ font-size:72px; }
  }
  `;

  if (!document.getElementById("lab-style")) {
    const s = document.createElement("style");
    s.id = "lab-style";
    s.textContent = LAB_CSS;
    document.head.appendChild(s);
  }

  window.LabSections = LabSections;
})();