body.home{height:100vh;overflow:hidden;margin:0;background:#0f0f0f;
  display:flex;flex-direction:column}
.hm-bar{flex:0 0 auto;height:clamp(52px,8.85vh,132px);background:#1a1a1a;
  border-top:1px solid #2a2a2a;border-bottom:1px solid #2a2a2a;
  display:flex;align-items:center}
.hm-nav{width:100%;max-width:min(2210px,86vw);margin:0 auto;
  padding:0 clamp(12px,1.75vw,46px);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,1.3vw,34px)}
.hm-link{color:#fff;text-decoration:none;font-size:clamp(17px,3.9vh,58px);font-weight:700;
  letter-spacing:.2px;line-height:1;white-space:nowrap;
  transition:opacity .12s}
.hm-link:hover,a.hm-mlink:hover{text-decoration:underline;text-decoration-thickness:.07em;
  text-underline-offset:.14em;text-decoration-skip-ink:none}
.hm-mark{color:#fff;font-size:clamp(24px,5.2vh,78px);line-height:1;white-space:nowrap;
  font-family:"Monotype Corsiva","Apple Chancery","Segoe Script","Brush Script MT",cursive;
  font-style:italic}
.hm-main{flex:1 1 auto;min-height:0;display:flex;align-items:center;
  justify-content:center;padding:20px 0 18px}
.hm-figure{margin:0;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;min-height:0}
.hm-art{max-width:64.7vw;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;min-height:0}
.hm-cap{flex:0 0 auto;color:#808080;font-size:38px;line-height:1;
  font-family:"Monotype Corsiva","Apple Chancery","Segoe Script","Brush Script MT",cursive;
  font-style:italic}
.hm-foot{flex:0 0 auto;height:clamp(18px,3vh,44px);background:#1a1a1a;border-top:1px solid #2a2a2a}
body.sub{height:100vh;overflow:hidden;margin:0;background:#0f0f0f;
  display:flex;flex-direction:column}
.hm-mark{text-decoration:underline;text-decoration-thickness:.045em;
  text-underline-offset:.06em;text-decoration-skip-ink:none}
.hm-link.current{cursor:default;text-decoration:underline;
  text-decoration-thickness:.07em;text-underline-offset:.14em;
  text-decoration-skip-ink:none}
.ab-main{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;
  justify-content:center;padding:clamp(18px,3vh,48px) 0}
.ab-panel{height:auto;min-height:0;max-height:100%;width:min(2100px,70vw);
  background:#1a1a1a;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(26px,3.2vw,84px)}
.ab-title{margin:0 0 .5em;font-size:clamp(26px,4.4vh,66px);line-height:1;
  font-family:"Monotype Corsiva","Apple Chancery","Segoe Script","Brush Script MT",cursive;
  font-style:italic;font-weight:400;color:#fff;text-align:center;
  text-decoration:underline;text-decoration-thickness:.07em;
  text-underline-offset:.14em;text-decoration-skip-ink:none}
.ab-copy{color:#d8d8d8;font-size:var(--ab-size,clamp(13px,2.6vh,46px));
  line-height:1.5;max-width:100%;
  text-align:justify;text-justify:inter-word}
.ab-copy.centered{text-align:center}
.ab-copy p{margin:0 0 .8em}
.ab-copy p:last-child{margin-bottom:0}
.ab-mail{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ab-mail:hover{opacity:.7}
@media (max-width:820px){
  .ab-panel{width:92vw;padding:16px}
  .ab-copy{line-height:1.42}
}
@media (max-width:820px){
  .hm-link{font-size:17px}
  .hm-mark{font-size:26px}
  .hm-cap{font-size:26px}
  .hm-nav{padding:0 12px;gap:10px}
  .hm-art{max-width:88vw}
}
.page{min-height:100vh;display:flex;flex-direction:column}
.page-nav{display:flex;align-items:baseline;gap:16px;padding:14px 20px;
  border-bottom:1px solid var(--line)}
.page-nav .mark{font-size:34px;margin:0;letter-spacing:.5px;line-height:1;
  color:var(--ink);text-decoration:none;font-weight:700}
a.page-nav-mark:hover,a.mark:hover{color:var(--accent)}
.page-crumb{color:var(--ink);font-size:19px}
.page-nav a:not(.mark){color:var(--ink-dim);text-decoration:none;font-size:15px}
.page-nav a:not(.mark):hover{color:var(--accent)}
.page-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:28px;padding:60px 20px;text-align:center}
.page-title{font-size:clamp(34px,7vw,72px);margin:0;line-height:1.05;letter-spacing:-.5px}
.page-lede{font-size:clamp(18px,2.4vw,26px);color:var(--ink-dim);margin:0;max-width:34ch;
  line-height:1.45}
.page-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.page-btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:12px;padding:13px 30px;font-size:17px;text-decoration:none;
  transition:border-color .12s,transform .12s}
.page-btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.page-btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  font-weight:600}
body.icons{margin:0;background:#0f0f0f;min-height:100vh;
  display:flex;flex-direction:column}
.ic-main{flex:1 1 auto;width:100%;max-width:min(2210px,86vw);margin:0 auto;
  padding:clamp(14px,2vh,30px) clamp(12px,1.75vw,46px) 60px}
.ic-bar{display:flex;align-items:center;gap:clamp(8px,1vw,18px);flex-wrap:wrap;
  padding-bottom:clamp(12px,1.8vh,24px)}
.ic-spacer{flex:1 1 auto}
.ic-group{display:flex;gap:0}
.ic-opt,.ic-btn{background:#1a1a1a;color:#b8b8b8;border:1px solid #2a2a2a;
  font:inherit;font-size:clamp(12px,1.6vh,16px);line-height:1;
  padding:.62em .95em;cursor:pointer;transition:background .12s,color .12s}
.ic-group .ic-opt+.ic-opt{border-left:0}
.ic-opt:hover,.ic-btn:hover{background:#232323;color:#e8e8e8}
.ic-opt.on{background:#e8e8e8;color:#111;border-color:#e8e8e8}
.ic-btn{border-radius:0}
.ic-count{color:#808080;font-size:clamp(12px,1.6vh,16px)}
.hidden{display:none}
.ic-grid{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,22px);align-items:flex-start}
.ic-cell{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.ic-box{display:flex;align-items:center;justify-content:center;
  border:1px solid #2a2a2a;background:#141414;overflow:hidden}
.ic-img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.ic-cap{color:#666;font-size:11px;line-height:1;font-variant-numeric:tabular-nums}
.ic-grid[data-size="s"] .ic-box{width:256px;height:256px}
.ic-grid[data-size="m"] .ic-box{width:384px;height:384px}
.ic-grid[data-size="l"] .ic-box{width:512px;height:512px}
.ic-grid .ic-img{image-rendering:pixelated}
.ic-grid[data-bg="light"] .ic-box{background:#fff;border-color:#d8d8d8}
.ic-grid.selecting .ic-cell{cursor:pointer}
.ic-grid.selecting .ic-cell:hover .ic-box{border-color:#6a6a6a}
.ic-cell.picked .ic-box{border-color:#e8e8e8;box-shadow:0 0 0 2px #e8e8e8}
.ic-empty{color:#808080}
.hm-artwrap{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:0;max-height:100%}
@media (max-width:760px){
  .ic-main{max-width:100%;padding-left:14px;padding-right:14px}
  .ic-grid[data-size="s"] .ic-box{width:min(256px,44vw);height:min(256px,44vw)}
  .ic-grid[data-size="m"] .ic-box{width:min(384px,70vw);height:min(384px,70vw)}
  .ic-grid[data-size="l"] .ic-box{width:min(512px,88vw);height:min(512px,88vw)}
}
body.fonts{margin:0;background:#0f0f0f;min-height:100vh;
  display:flex;flex-direction:column}
.fn-main{flex:1 1 auto;width:100%;max-width:min(1400px,92vw);margin:0 auto;
  padding:clamp(14px,2vh,30px) clamp(12px,1.75vw,46px) 80px}
.fn-roles{display:grid;gap:12px;margin-bottom:14px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fn-role{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  background:#151515;border:1px solid #2a2a2a;color:#e8e8e8;
  padding:14px 16px;cursor:pointer;text-align:left;font:inherit;
  transition:border-color .12s,background .12s}
.fn-role:hover{background:#1b1b1b;border-color:#3d3d3d}
.fn-role.on{border-color:#e8e8e8;background:#1d1d1d;box-shadow:inset 0 0 0 1px #e8e8e8}
.fn-role-name{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7a7a7a}
.fn-role-sample{line-height:1.15;color:#fff;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.fn-role-font{font-size:12px;color:#8a8a8a}
.fn-hint{color:#8a8a8a;font-size:13px;margin:0 0 16px;
  display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.fn-hint #fnActive{color:#e8e8e8;font-weight:700}
.fn-used{color:#6f6f6f}
.fn-used.over{color:#e0a33a}
.fn-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid #222;margin-bottom:8px}
.fn-ctl{display:flex;align-items:center;gap:9px;color:#8a8a8a;font-size:13px}
.fn-ctl input[type=range]{width:190px;accent-color:#e8e8e8}
.fn-ctl output{color:#e8e8e8;font-variant-numeric:tabular-nums;min-width:44px}
.ic-opt.on{background:#e8e8e8;color:#111;border-color:#e8e8e8}
.fn-cat{color:#6a6a6a;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  margin:30px 0 6px;font-weight:700}
.fn-card{border-top:1px solid #1e1e1e;padding:16px 0 20px;cursor:pointer;
  transition:background .12s}
.fn-card:hover{background:#141414}
.fn-card.used{background:#141414;box-shadow:inset 3px 0 0 #e8e8e8;padding-left:14px}
.fn-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.fn-name{color:#e8e8e8;font-size:15px}
.fn-lic{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#8a8a8a;border:1px solid #333;padding:2px 7px}
.fn-lic.ok{color:#7ec98f;border-color:#2f5138}
.fn-lic.sys{color:#d9a441;border-color:#4a3a1c}
.fn-tags{display:flex;gap:6px;margin-left:auto}
.fn-tags em{font-style:normal;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;background:#e8e8e8;color:#111;padding:2px 7px}
.fn-line{margin:0 0 6px;color:#fff;line-height:1.25;word-break:break-word}
.fn-line.two{color:#9a9a9a}
@media (max-width:760px){
  .fn-main{max-width:100%;padding-left:14px;padding-right:14px}
  .fn-ctl input[type=range]{width:120px}
}
.hm-mnav,.m-only{display:none}
@media (max-width:600px){
  html:has(body.home),html:has(body.sub){background:#0f0f0f;overflow:hidden;scrollbar-width:none}
  html:has(body.home)::-webkit-scrollbar,html:has(body.sub)::-webkit-scrollbar{display:none}
  body.home,body.sub{height:100vh;height:100dvh}
  .hm-bar{height:76px}
  .hm-nav{justify-content:center;max-width:none;padding:0 12px}
  .hm-nav .hm-link{display:none}
  .hm-mark{font-size:50px}
  .hm-foot,.hm-foot.m-only{display:flex;align-items:center;height:64px;
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:#1a1a1a;border-top:1px solid #2a2a2a}
  .hm-mnav{display:flex;width:100%;align-items:center;justify-content:space-evenly;padding:0 6px}
  .hm-mlink{color:#fff;text-decoration:none;white-space:nowrap;
    font:900 35px/1 "Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.035em}
  .hm-mlink.current{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.12em}
  .hm-main{position:relative;padding:0;overflow:hidden;container-type:size}
  .hm-figure{position:absolute;inset:0;height:auto}
  .hm-cap{display:none}
  .hm-artwrap{position:absolute;left:50%;top:50%;width:100cqh;height:108cqw;
    max-height:none;transform:translate(-50%,-50%) rotate(-90deg)}
  .hm-art{width:100%;height:100%;max-width:none;max-height:none;object-fit:fill}
  .ab-main{overflow-y:auto;align-items:flex-start;padding:12px 0}
  .ab-panel{max-height:none;min-height:0;margin:auto 0;align-self:flex-start}
  .ab-copy{font-size:17px;text-align:left}
}