/* Page styles for grapheneos-bone-app.html.
   Extracted from the inline <style> blocks on 2026-09-11, byte for byte and in
   the same order, and linked from the same position in the head. The cascade is
   unchanged; what changed is that the CSS is now a file the browser can cache
   and a person can read. */

/* ─────────────────────────────────────────────────────────────
   Bone, running, an interactive build of the GrapheneOS case
   Geometry, palette and copy are taken from the Figma exports in
   ./reference-svg (412 × 892, the Pixel viewport the file is drawn at).
   ───────────────────────────────────────────────────────────── */

/* Page chrome, on the site design language. Inter and JetBrains Mono on
   paper, the same tokens style.css declares. The phone keeps Geist, which
   is the case's own typeface and the argument it is making. */
:root{
  --bg:#F5EFE2;
  --paper:#FBF7EE;
  --page-ink:#161613;
  --page-ink-2:#4A4A44;
  --muted:#6B6B66;
  --rule:#E1DBCC;
  --rule-soft:rgba(20,22,26,.10);
  --hover:#2A2A26;
  --ui:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ui-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);

  /* Material 3 motion, for the device only */
  --emph:cubic-bezier(.2,0,0,1);
  --emph-dec:cubic-bezier(.05,.7,.1,1);
  --emph-acc:cubic-bezier(.3,0,.8,.15);
  --std:cubic-bezier(.2,0,0,1);
  --std-dec:cubic-bezier(0,0,0,1);
  --std-acc:cubic-bezier(.3,0,1,1);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--page-ink);
  font-family:var(--ui);font-size:17px;line-height:1.55;font-weight:400;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
.bstage{
  display:grid;grid-template-columns:minmax(0,360px) auto;justify-content:center;
  gap:clamp(24px,5vw,72px);
  align-items:start;max-width:1180px;margin:0 auto;
  padding:84px clamp(20px,4vw,56px) 36px;
}
@media (max-width:900px){
  .bstage{grid-template-columns:1fr;justify-items:center;gap:28px;padding:80px 16px 40px}
  .rail{order:2;width:min(100%,412px);max-width:none}
}

/* Rail (prototype chrome, deliberately not part of Bone) ------------- */
.rail{max-width:360px;display:flex;flex-direction:column;gap:20px;padding-top:2px}
.rail .backlink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.95rem;color:var(--muted);text-decoration:none;
  transition:color var(--t-fast,180ms) var(--ease);
}
.rail .backlink span{transition:transform var(--t-fast,180ms) var(--ease)}
.rail .backlink:hover span{transform:translateX(-2px)}
.rail .backlink:hover{color:var(--page-ink)}
.rail h1{
  font-size:clamp(1.6rem,2.6vw,2rem);font-weight:600;letter-spacing:-.025em;
  margin:10px 0 0;line-height:1.14;
}
.rail .sub{font-size:.98rem;line-height:1.55;color:var(--page-ink-2);margin:10px 0 0;max-width:44ch}
.group{display:flex;flex-direction:column;gap:2px}
.group>.lbl{
  font-size:.8rem;letter-spacing:.01em;color:var(--muted);margin-bottom:6px;
}
.jump{
  display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;
  background:none;border:0;border-radius:8px;padding:6px 10px;cursor:pointer;
  font-family:inherit;font-size:.97rem;color:var(--page-ink);
  transition:background var(--t-fast,180ms) var(--ease),color var(--t-fast,180ms) var(--ease);
}
.jump:hover{background:var(--paper)}
.jump:focus-visible{outline:2px solid var(--page-ink);outline-offset:1px}
.jump[aria-current="true"]{background:var(--paper);font-weight:500}
.jump .k{font-family:var(--ui-mono);font-size:.8rem;color:var(--muted);width:16px;flex:none}
.jump .note{margin-left:auto;font-family:var(--ui-mono);font-size:.75rem;color:var(--muted)}

.switchrow{display:flex;gap:10px;flex-wrap:wrap}
.seg{
  display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:3px;gap:2px;
  background:var(--paper);
}
.seg button{
  font:500 .9rem/1 var(--ui);border:0;background:none;color:var(--muted);
  padding:9px 16px;border-radius:999px;cursor:pointer;
  transition:color var(--t-fast,180ms) var(--ease),background var(--t-fast,180ms) var(--ease);
}
.seg button[aria-pressed="true"]{background:var(--page-ink);color:var(--bg)}
.seg button:hover{color:var(--page-ink)}
.seg button[aria-pressed="true"]:hover{color:var(--bg);background:var(--hover)}
.seg button:focus-visible{outline:2px solid var(--page-ink);outline-offset:2px}

.hint{
  font-size:.92rem;line-height:1.55;color:var(--muted);
  border-top:1px solid var(--rule);padding-top:16px;
}
.hint b{color:var(--page-ink);font-weight:500}
.hint p{margin:0 0 8px}
.hint p:last-child{margin-bottom:0}

/* Device ------------------------------------------------------------- */
.deviceWrap{
  position:sticky;top:clamp(84px,9vw,104px);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
/* The box carries the scaled footprint so the phone never needs a negative
   margin to compensate, which is what used to drag it off the right edge. */
.deviceBox{width:calc(412px * var(--s,1));height:calc(892px * var(--s,1))}
/* Declared after .deviceWrap on purpose: the same rule sitting in the media
   block above lost the cascade to position:sticky, and the phone floated
   over the rail. */
@media (max-width:900px){ .deviceWrap{position:static;top:auto} }
.device{
  --W:412px;--H:892px;
  position:relative;width:var(--W);height:var(--H);border-radius:44px;
  overflow:hidden;background:var(--ground);color:var(--ink);
  font-family:var(--font);
  box-shadow:
    0 0 0 1px rgba(22,22,19,.07),
    0 2px 4px rgba(22,22,19,.04),
    0 24px 60px -18px rgba(22,22,19,.26),
    0 60px 120px -40px rgba(22,22,19,.22);
  --font:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  touch-action:none;user-select:none;-webkit-user-select:none;
  transform:scale(var(--s,1));transform-origin:top left;
}

/* Bone tokens, every colour below is bound here, not typed inline.
   Flipping [data-theme] on .device re-themes every screen. */
.device{
  --ground:#f2f0ec;
  --surface:#fcfbf9;
  --surface-veil:rgba(252,251,249,.72);
  --line:#e7e3dc;
  --divider:#ebe8e1;
  --ink:#141618;
  --ink-2:#5a6068;
  --ink-3:#8c9099;
  --label:#a8a29a;
  --green:#0e7350;
  --green-bg:#e2efe9;
  --blue:#1a56b8;
  --blue-bg:#e3eaf7;
  --blue-line:#1a56b8;
  --amber:#9c5a03;
  --purple:#5b3fa8;
  --track-off:#c9c6cc;
  --track-on:#1a56b8;
  --thumb-on:#fcfbf9;
  --thumb-off:#fcfbf9;
  --orb:rgba(255,229,193,.55);
  --scrim:rgba(20,22,24,.22);
  --ripple:rgba(20,22,24,.09);
  --shadow-card:0 3px 10px -2px rgba(20,23,28,.05);
}
.device[data-theme="dark"]{
  --ground:#161513;
  --surface:#23211e;
  --surface-veil:rgba(35,33,30,.72);
  --line:#3a3630;
  --divider:#2e2b27;
  --ink:#ede9e3;
  --ink-2:#929096;
  --ink-3:#837d74;
  --label:#837d74;
  --green:#5fd0a2;
  --green-bg:#17302a;
  --blue:#7fa9ec;
  --blue-bg:#1b2434;
  --blue-line:#7fa9ec;
  --amber:#e0ac5c;
  --purple:#a995e8;
  --track-off:#4a453d;
  --track-on:#7fa9ec;
  --thumb-on:#131416;
  --thumb-off:#918a7e;
  --orb:rgba(255,196,120,.10);
  --scrim:rgba(0,0,0,.42);
  --ripple:rgba(237,233,227,.10);
  --shadow-card:0 3px 10px -2px rgba(0,0,0,.35);
}

.caption{
  font-family:var(--ui-mono);font-size:.75rem;color:var(--muted);letter-spacing:.01em;
  height:16px;
}

/* Screens ------------------------------------------------------------ */
.scr{
  position:absolute;inset:0;background:var(--ground);color:var(--ink);
  display:none;flex-direction:column;overflow:hidden;
}
.scr.is-on{display:flex}
.scr.is-anim{display:flex}

/* Status bar */
.sb{
  height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink);
  position:relative;z-index:3;
}
.sb .right{display:flex;align-items:center;gap:7px;font-weight:400;color:var(--ink-2)}
.sb .right svg{display:block}

/* Lock screen -------------------------------------------------------- */
.lock .orb{
  position:absolute;left:-110px;top:-160px;width:560px;height:440px;border-radius:50%;
  background:var(--orb);filter:blur(48px);pointer-events:none;
}
.lock .top{padding:23px 26px 0;display:flex;align-items:center;gap:12px;position:relative;z-index:2}
.chip{
  display:inline-flex;align-items:center;gap:9px;height:27px;padding:0 12px 0 11px;
  border-radius:13.5px;background:var(--green-bg);color:var(--green);
  font-size:12px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;
  border:0;font-family:inherit;cursor:pointer;position:relative;overflow:hidden;
}
.chip .dot{width:6px;height:6px;border-radius:3px;background:var(--green);flex:none}
.lock .patch{font-size:13px;color:var(--ink-2);letter-spacing:-.01em}
.lock .clock{
  padding:18px 26px 0;font-weight:300;font-size:100px;line-height:.88;
  letter-spacing:-4.5px;color:var(--ink);position:relative;z-index:2;
  font-variant-numeric:tabular-nums;
}
.lock .clock>div:first-child{margin-bottom:-16px}
.lock .date{padding:18px 26px 0;font-size:17px;color:var(--ink-2);letter-spacing:-.01em;position:relative;z-index:2}
.lock .fill{flex:1}
.lock .capwrap{padding:0 18px 12px;position:relative;z-index:2}
.cap{
  height:62px;border-radius:26px;background:var(--surface-veil);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  width:100%;font-family:inherit;cursor:pointer;position:relative;overflow:hidden;
}
.cap .c{display:flex;flex-direction:column;align-items:center;gap:8px}
.cap .c svg{display:block;color:var(--ink-2)}
.cap .c .d{width:4px;height:4px;border-radius:2px;background:var(--ink)}
.cap .c.on svg{color:var(--blue)}
.cap .c.on .d{background:var(--blue)}
.cap .c.sensor svg{color:var(--purple)}
.cap .c.sensor .d{background:var(--purple)}
.lock .notifwrap{padding:0 16px 18px;position:relative;z-index:2}
.lock .hi{padding-bottom:26px;display:flex;justify-content:center;position:relative;z-index:2}
.lock .hi i{display:block;width:120px;height:4px;border-radius:2px;background:var(--ink);opacity:.85}

/* Notification card -------------------------------------------------- */
.notif{
  background:var(--surface);border:1px solid var(--line);border-radius:28px;
  padding:16px 18px 18px;box-shadow:var(--shadow-card);
  position:relative;overflow:hidden;text-align:left;width:100%;font-family:inherit;
  display:block;cursor:pointer;color:inherit;
}
.notif .hd{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.notif .ico{width:14px;height:14px;border-radius:4.5px;flex:none;display:grid;place-items:center}
.notif .ico svg{width:9px;height:9px;display:block}
.notif .app{font-size:12px;font-weight:500;letter-spacing:-.003em;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif .when{font-size:12px;color:var(--ink-3)}
.notif .ttl{font-size:17px;font-weight:500;line-height:1.34;letter-spacing:-.015em;color:var(--ink)}
.notif .bd{font-size:13px;line-height:1.45;color:var(--ink-2);margin-top:8px}
.notif.amber .ico{background:rgba(156,90,3,.16);border:1px solid rgba(156,90,3,.45);color:var(--amber)}
.notif.amber .app{color:var(--amber)}
.notif.purple .ico{background:rgba(91,63,168,.16);border:1px solid rgba(91,63,168,.5);color:var(--purple)}
.notif.purple .app{color:var(--purple)}
.notif.blue .ico{background:var(--blue);border:1px solid var(--blue);color:#fff}
.notif.blue .app{color:var(--blue)}
.device[data-theme="dark"] .notif.amber .ico{background:rgba(224,172,92,.16);border-color:rgba(224,172,92,.45)}
.device[data-theme="dark"] .notif.purple .ico{background:rgba(169,149,232,.16);border-color:rgba(169,149,232,.5)}
.device[data-theme="dark"] .notif.blue .ico{color:#131416}

/* Shade -------------------------------------------------------------- */
.shade{
  position:absolute;inset:0;z-index:6;display:none;flex-direction:column;
  background:var(--ground);will-change:transform;contain:paint;
}
.shade.is-live{display:flex}
.scrim{
  position:absolute;inset:0;z-index:5;background:var(--scrim);opacity:0;display:none;
  will-change:opacity;
}
.scrim.is-live{display:block}
.shade .body{flex:1;overflow:hidden;position:relative}
.shadeclose{
  flex:none;height:52px;padding:0 0 26px;background:none;border:0;cursor:pointer;
  display:grid;place-items:end center;
}
.shadeclose i{
  display:block;width:120px;height:4px;border-radius:2px;background:var(--ink);opacity:.85;
  transition:transform 160ms var(--std),opacity 160ms var(--std);
}
.shadeclose:hover i{opacity:1}
.shadeclose:active i{transform:scaleX(.86)}
.pane{position:absolute;inset:0;display:flex;flex-direction:column;padding:7px 16px 0;will-change:transform,opacity}
.seclabel{
  font-size:12px;color:var(--label);letter-spacing:.015em;padding:0 10px 10px;
}
.notiflist{display:flex;flex-direction:column;gap:10px}
.notifslot{will-change:transform,opacity;touch-action:pan-y}

/* Quick settings */
.qs .hcard{
  background:var(--surface);border:1px solid var(--line);border-radius:28px;overflow:hidden;
  box-shadow:var(--shadow-card);
}
.qs .hcard .chiprow{padding:16px 18px 6px}
.qs .row{
  display:flex;align-items:center;gap:12px;padding:0 18px;height:76px;
  border-top:1px solid var(--divider);position:relative;overflow:hidden;
  width:100%;background:none;border-left:0;border-right:0;border-bottom:0;
  font-family:inherit;text-align:left;color:inherit;cursor:pointer;
}
.qs .row .t{flex:1;min-width:0}
.qs .row .t b{display:block;font-size:17px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.qs .row .t span{display:block;font-size:13px;color:var(--ink-2);margin-top:5px}
.qs .row .act{font-size:15px;font-weight:500;color:var(--green)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}
.btile{
  height:110px;border-radius:26px;border:1px solid var(--line);background:var(--surface);
  padding:26px 18px 16px;display:flex;flex-direction:column;align-items:flex-start;
  position:relative;overflow:hidden;font-family:inherit;text-align:left;cursor:pointer;
  color:inherit;
  transition:background 220ms var(--std),border-color 220ms var(--std);
}
.btile svg{color:var(--ink-3);display:block;transition:color 220ms var(--std)}
.btile .lb{font-size:17px;font-weight:500;letter-spacing:-.015em;color:var(--ink-2);margin-top:auto;
  transition:color 220ms var(--std)}
.btile .st{font-size:13px;color:var(--ink-3);margin-top:3px;transition:color 220ms var(--std)}
.btile[aria-pressed="true"]{background:var(--blue-bg);border-color:var(--blue-line)}
.btile[aria-pressed="true"] svg,
.btile[aria-pressed="true"] .lb{color:var(--blue)}
.btile[aria-pressed="true"] .lb{color:var(--ink)}
.btile[aria-pressed="true"] .st{color:var(--blue)}
.device[data-theme="dark"] .btile[aria-pressed="true"] .lb{color:var(--ink)}

/* Settings screens --------------------------------------------------- */
.set{overflow:hidden}
.set .scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:16px;
  scrollbar-width:none;overscroll-behavior:contain}
.set .scroll::-webkit-scrollbar{display:none}
.back{
  margin:5px 0 0 17px;width:32px;height:32px;border-radius:16px;border:0;background:none;
  display:grid;place-items:center;cursor:pointer;color:var(--ink);position:relative;overflow:hidden;
}
.set h2{
  margin:10px 26px 0;font-size:31px;font-weight:500;letter-spacing:-.03em;line-height:1.08;
  color:var(--ink);text-wrap:balance;
}
.set .lede{
  margin:9px 0 0 26px;font-size:15.5px;line-height:23px;letter-spacing:-.012em;color:var(--ink-2);
  max-width:360px;
}
.set .chiprow{margin:19px 26px 0}
.set .slab{margin:30px 26px 8px;font-size:12px;color:var(--label);letter-spacing:.015em}
.card{
  margin:0 16px;background:var(--surface);border:1px solid var(--line);border-radius:24px;
  overflow:hidden;
}
.card+.slab{margin-top:29px}
.srow{
  display:flex;align-items:center;gap:14px;padding:0 18px;width:100%;
  background:none;border:0;border-top:1px solid var(--divider);font-family:inherit;
  text-align:left;color:inherit;position:relative;overflow:hidden;
}
.srow:first-child{border-top:0}
.srow.tap{cursor:pointer}
.srow.h49{height:49px}
.srow.h76{height:76px}
.srow.h115{height:115px;align-items:center}
.srow .t{flex:1;min-width:0}
.srow .t b{display:block;font-size:17px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.srow.quiet .t b{font-weight:400;color:var(--ink-2)}
.srow .t span{display:block;font-size:13px;color:var(--ink-2);margin-top:3px}
.srow .t .warn{
  display:flex;gap:6px;margin-top:7px;font-size:13px;line-height:1.35;color:var(--amber);
  max-width:250px;
}
.srow .t .warn svg{flex:none;margin-top:1px}
.srow .val{font-size:15px;font-weight:500;color:var(--green);letter-spacing:-.01em;padding:0;margin:0}
.srow .val.mono{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:0}
.srow .val.plain{color:var(--ink-2);font-weight:400}
.srow .chev{color:var(--ink-3);flex:none;display:block}
.srow .cnt{font-size:15px;color:var(--ink-2);letter-spacing:-.01em}
.pillwrap{padding:0 16px;margin-top:auto}
.bpill{
  display:block;width:100%;height:54px;border-radius:20px;background:var(--green-bg);
  border:1px solid var(--green);color:var(--green);font:500 17px/1 var(--font);
  letter-spacing:-.015em;cursor:pointer;position:relative;overflow:hidden;
  transition:transform 150ms var(--std);
}
.bpill:active{transform:scale(.985)}
.set .foot{height:32px;flex:none}

/* Switch (Material 3) ------------------------------------------------ */
.sw{
  width:46px;height:28px;border-radius:14px;background:var(--track-off);border:0;padding:0;
  position:relative;cursor:pointer;flex:none;
  transition:background 240ms var(--std);
}
.sw[aria-checked="true"]{background:var(--track-on)}
.sw i{
  position:absolute;top:50%;left:2px;width:24px;height:24px;border-radius:50%;
  background:var(--thumb-off);display:block;
  transform:translate(0,-50%);
  transition:background 240ms var(--std);
  will-change:transform,width,height;
}
.sw[aria-checked="true"] i{background:var(--thumb-on)}

/* Top handle. Sits in the empty middle of the status bar, so it costs no
   layout, and steps through closed, notifications, quick settings. */
.grabber{
  position:absolute;left:50%;top:8px;width:88px;height:28px;margin-left:-44px;
  display:grid;place-items:center;cursor:pointer;
}
.grabber::after{
  content:"";display:block;width:36px;height:4px;border-radius:2px;
  background:var(--ink);opacity:.22;
  transition:opacity 200ms var(--std), width 260ms var(--emph);
}
#topGrab:hover .grabber::after{opacity:.4}
.grabber.at1::after{width:52px;opacity:.4}
.grabber.at2::after{width:20px;opacity:.32}

/* Ripple ------------------------------------------------------------- */
.rip{
  position:absolute;border-radius:50%;background:var(--ripple);pointer-events:none;
  transform:scale(0);opacity:1;
}

/* Container transform layer ------------------------------------------ */
.morph{
  position:absolute;z-index:12;background:var(--surface);border:1px solid var(--line);
  pointer-events:none;overflow:hidden;
}

/* Pointer ------------------------------------------------------------
   A filled dot standing in for a fingertip, taking a new hue on every
   press. Mouse only: a touch device keeps its own pointer, which is a
   real finger. */
.cursor{
  position:fixed;left:0;top:0;width:15px;height:15px;border-radius:50%;
  background:hsl(162 56% 38%);
  box-shadow:0 0 0 1px rgba(255,255,255,.42), 0 1px 5px rgba(20,22,26,.32);
  pointer-events:none;z-index:999;opacity:0;display:none;
  transition:opacity 180ms var(--std), background 260ms var(--std);
}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
  .device, .device *{cursor:none !important}
}

/* Focus + motion ----------------------------------------------------- */
.device button:focus-visible{outline:2px solid var(--green);outline-offset:-3px;border-radius:12px}
@media (prefers-reduced-motion: reduce){
  .device *{transition-duration:1ms !important}
}

/* ?embed=1: whatever hosts the iframe supplies the framing, so the page drops
   its heading, intro, hints and site chrome and sits flush. */
html.embed, html.embed body{height:100%}
html.embed .nav, html.embed .menu, html.embed .foot, html.embed .skip-link{display:none}
/* The close pill sets the header line, so the content starts under it. */
html.embed .bstage{padding:56px 20px 24px;max-width:1080px;align-items:end}
/* align:end lands on the wrap's bottom, which carries the caption below the
   phone. Lift the rail by the caption plus its gap so it sits on the phone's
   own baseline instead. */
html.embed .rail{margin-bottom:30px}
html.embed .rail h1,
html.embed .rail .sub,
html.embed .rail .backlink,
html.embed .hint{display:none}
html.embed .rail{gap:20px;padding-top:0}
@media (max-width:900px){
  /* On a phone the screen list becomes one scrolling strip of chips, so the
     phone itself keeps the height rather than a seven row list taking it. */
  /* clears the close button, which otherwise sits on the status bar */
  html.embed .bstage{padding-top:52px}
  html.embed .rail{gap:12px}
  html.embed .switchrow{justify-content:center}
  html.embed .group{
    display:flex; flex-direction:row; gap:6px; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin:0 -16px; padding:2px 16px;
  }
  html.embed .group::-webkit-scrollbar{display:none}
  html.embed .group>.lbl{display:none}
  html.embed .jump{
    flex:none; width:auto; white-space:nowrap; padding:8px 13px; border-radius:999px;
    border:1px solid var(--rule); background:var(--paper); font-size:.92rem;
  }
  html.embed .jump[aria-current="true"]{background:var(--page-ink);color:var(--bg);border-color:var(--page-ink)}
  html.embed .jump .k, html.embed .jump .note{display:none}
  html.embed .caption{display:none}
}