@layer theme, base, hyperframes, studio, components, utilities;@layer components{.tl-crumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;color:var(--ink-soft);font-family:var(--font-mono);font-size:11.5px}.tl-crumbs a{transition:color .2s}.tl-crumbs a:hover{color:var(--accent-deep)}.tl-crumbs [aria-current]{color:var(--ink-2)}.tl-intro{display:flex;flex-direction:column;align-items:center;margin-top:clamp(20px,3vw,34px);text-align:center}.tl-intro .pg-lede{margin-inline:auto}.tl-h1{max-width:900px}.tl-mark{font-style:italic;padding-inline:.04em .08em;background:var(--ink-blue) 30% 50% /180% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.tl-bench{position:relative;max-width:1080px;margin:clamp(36px,5vw,56px) auto 0;padding:clamp(18px,3vw,36px);border:1px solid var(--line);border-radius:28px;background:var(--white);box-shadow:0 1px 0 rgb(var(--shade)/.03),0 40px 80px -56px rgb(var(--shade)/.45)}.tl-bench-bird{position:absolute;top:-50px;right:clamp(20px,5vw,56px);height:50px;overflow:hidden;pointer-events:none}.tl-bench-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:clamp(20px,3vw,28px);padding-top:18px;border-top:1px dashed var(--line-strong);color:var(--ink-soft);font-size:13.5px;text-align:center}.tl-bench-foot svg{flex:none;width:14px;height:14px;color:var(--sage)}.tl-label{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}.tl-hint,.tl-label{color:var(--ink-soft)}.tl-hint{margin-top:10px;font-size:13.5px;line-height:1.5}.tl-ar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px)}.tl-ar-controls{display:grid;gap:26px;align-content:start}.tl-field{min-width:0;margin:0;padding:0;border:0}.tl-field>legend{margin-bottom:12px;padding:0}.tl-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.tl-preset{display:grid;justify-items:center;gap:2px;padding:12px 4px 10px;border:1px solid var(--line);border-radius:14px;background:var(--white);cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s var(--ease-out)}.tl-preset:hover{border-color:var(--line-strong);background:var(--paper)}.tl-preset:active{transform:scale(.97)}.tl-preset[aria-pressed=true]{border-color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}.tl-copy:focus-visible,.tl-lock:focus-visible,.tl-preset:focus-visible,.tl-size-chip:focus-visible{outline:3px solid var(--accent-glow);outline-offset:2px}.tl-preset-shape{display:grid;place-items:center;width:26px;height:26px;margin-bottom:6px}.tl-preset-shape>span{display:block;border:1.5px solid var(--ink-2);border-radius:3px}.tl-preset[aria-pressed=true] .tl-preset-shape>span{border-color:var(--sky);background:var(--sky-tint)}.tl-preset-ratio{color:var(--ink);font-size:15px;font-weight:640;letter-spacing:-.01em;font-variant-numeric:tabular-nums}.tl-preset-name{color:var(--ink-soft);font-size:11.5px}.tl-size-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:end}.tl-ratio-row{display:grid;grid-template-columns:112px auto 112px;justify-content:start;gap:10px;align-items:center}.tl-ratio-colon{color:var(--ink-soft);font-size:22px;font-weight:600}.tl-number{min-width:0}.tl-number-label{display:block;margin-bottom:6px;color:var(--ink-2);font-size:14px;font-weight:550}.tl-number-box{position:relative}.tl-number-suffix{position:absolute;top:50%;right:14px;color:var(--ink-soft);font-family:var(--font-mono);font-size:12px;transform:translateY(-50%);pointer-events:none}.tl-lock{display:grid;place-items:center;width:44px;height:48px;border:1px dashed var(--line-strong);border-radius:14px;background:transparent;color:var(--ink-soft);cursor:pointer;transition:color .2s,border-color .2s,background-color .2s}.tl-lock svg{width:19px;height:19px}.tl-lock:hover{color:var(--ink);border-color:var(--ink-soft)}.tl-lock[aria-pressed=true]{border-style:solid;border-color:var(--ink);background:var(--ink);color:var(--white)}.tl-ar-result{display:grid;align-content:start;gap:22px;padding:clamp(16px,2.4vw,24px);border-radius:20px;background:var(--paper)}.tl-mat{position:relative;aspect-ratio:16/10;border-radius:14px;background:linear-gradient(rgb(var(--shade)/.07) 1px,transparent 1px) 0 0 /100% 50px,linear-gradient(90deg,rgb(var(--shade)/.07) 1px,transparent 1px) 0 0 /50px 100%,linear-gradient(rgb(var(--shade)/.035) 1px,transparent 1px) 0 0 /100% 10px,linear-gradient(90deg,rgb(var(--shade)/.035) 1px,transparent 1px) 0 0 /10px 100%,var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}.tl-mat-area{position:absolute;inset:18% 20% 12% 16%;display:grid;place-items:center}.tl-frame{position:relative;border:1.5px solid var(--ink);border-radius:6px;background:var(--white);box-shadow:0 18px 30px -18px rgb(var(--shade)/.45);transition:width .45s var(--ease-out),height .45s var(--ease-out)}.tl-thirds{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent calc(33.333% - .5px),rgb(var(--shade)/.09) calc(33.333% - .5px),rgb(var(--shade)/.09) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgb(var(--shade)/.09) calc(66.666% - .5px),rgb(var(--shade)/.09) calc(66.666% + .5px),transparent calc(66.666% + .5px)),linear-gradient(transparent calc(33.333% - .5px),rgb(var(--shade)/.09) calc(33.333% - .5px),rgb(var(--shade)/.09) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgb(var(--shade)/.09) calc(66.666% - .5px),rgb(var(--shade)/.09) calc(66.666% + .5px),transparent calc(66.666% + .5px))}.tl-dim{position:absolute;display:flex;align-items:center;justify-content:center;isolation:isolate;color:var(--ink-2);font-family:var(--font-mono);font-size:11px;white-space:nowrap}.tl-dim:before{content:"";position:absolute;z-index:-1}.tl-dim>b{padding:2px 6px;border-radius:4px;background:var(--paper-2);font-weight:500}.tl-dim-w{left:0;right:0;top:-30px;height:14px;border-inline:1.5px solid var(--ink-soft)}.tl-dim-w:before{left:0;right:0;top:50%;border-top:1px solid var(--ink-soft)}.tl-dim-h{top:0;bottom:0;left:-30px;width:14px;border-top:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);writing-mode:vertical-rl;transform:rotate(180deg)}.tl-dim-h:before{top:0;bottom:0;left:50%;border-left:1px solid var(--ink-soft)}.tl-result-ratio{margin-top:6px;font-family:var(--font-serif);font-variation-settings:var(--serif-settings);font-size:clamp(40px,4.4vw,54px);font-weight:460;line-height:1;letter-spacing:-.03em;font-variant-numeric:lining-nums;background:var(--ink-blue) 30% 50% /180% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:tl-ink-in .5s var(--ease-out)}@keyframes tl-ink-in{0%{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}.tl-result-meta{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:10px;color:var(--ink-2);font-family:var(--font-mono);font-size:12.5px}.tl-result-uses{font-size:15.5px;line-height:1.5}.tl-result-tip,.tl-result-uses{margin-top:12px;color:var(--ink-2)}.tl-result-tip{padding:10px 12px;border-radius:12px;background:var(--mustard-tint);font-size:14px;line-height:1.45}.tl-result-placeholder{margin-top:10px;color:var(--ink-soft);font-size:16px}.tl-sizes{margin-top:20px}.tl-size-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.tl-size-chip{height:36px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--white);color:var(--ink-2);font-size:14px;font-weight:550;font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .2s,color .2s}.tl-size-chip:hover{border-color:var(--ink-soft);color:var(--ink)}.tl-size-chip[aria-pressed=true]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.tl-copy{display:inline-flex;align-items:center;gap:8px;height:44px;margin-top:20px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:var(--white);font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:transform .2s var(--ease-out)}.tl-copy:hover{transform:translateY(-1px)}.tl-copy svg{width:16px;height:16px}.tl-sections{display:grid;gap:clamp(48px,6vw,80px);max-width:860px;margin:clamp(64px,8vw,112px) auto 0}.tl-section-title{font-size:clamp(24px,2.4vw,32px);font-weight:640;line-height:1.15;letter-spacing:-.03em;text-wrap:balance}.tl-section-lede{max-width:620px;margin-top:10px;color:var(--ink-soft);font-size:16px;line-height:1.6;text-wrap:pretty}.tl-prose{max-width:720px}.tl-prose p{margin-top:14px;color:var(--ink-2);font-size:clamp(16.5px,1.3vw,18px);line-height:1.75;text-wrap:pretty}.tl-table-wrap{margin-top:22px;overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--white)}.tl-table{width:100%;border-collapse:collapse;font-size:15px}.tl-table td,.tl-table th{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.45}.tl-table tr:last-child>*{border-bottom:0}.tl-table thead th{color:var(--ink-soft);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;background:var(--paper)}.tl-table tbody th{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}.tl-table td{color:var(--ink-2)}.tl-table td:nth-child(3){font-variant-numeric:tabular-nums}.tl-figure .pg-paper{padding-top:clamp(32px,4vw,52px)}.tl-lineup{display:grid;grid-template-columns:minmax(0,.5625fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.333fr) minmax(0,1.778fr);gap:clamp(10px,2vw,22px);align-items:start;margin-top:28px;padding-bottom:4px}.tl-lineup li{display:grid;gap:12px;min-width:0}.tl-lineup-shape{position:relative;display:grid;place-items:center;width:100%;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper)}.tl-lineup li:first-child .tl-lineup-shape{background:var(--sky-tint);border-color:var(--sky)}.tl-lineup-ratio{font-family:var(--font-serif);font-variation-settings:var(--serif-settings);font-size:clamp(17px,2vw,26px);font-weight:500;letter-spacing:-.02em}.tl-lineup-use{color:var(--ink-soft);font-size:13px;line-height:1.4}.tl-updated{display:inline-block}.tl-all{margin-top:22px}.tl-directory{display:grid;gap:40px;max-width:1080px;margin:clamp(32px,4vw,48px) auto 0}.tl-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:12px}.tl-group-title{font-family:var(--font-serif);font-variation-settings:var(--serif-settings);font-size:clamp(24px,2.2vw,28px);font-weight:460;letter-spacing:-.025em}.tl-group-lede{color:var(--ink-soft);font-size:14.5px}.tl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--line)}.tl-list-related{margin-top:24px}.tl-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:76px;padding:14px 18px;background:var(--white);transition:background-color .2s}.tl-list>.tl-row:last-child:nth-child(odd){grid-column:1/-1}a.tl-row:hover{background:var(--paper)}a.tl-row:focus-visible{position:relative;outline:3px solid var(--accent-glow);outline-offset:-3px}.tl-row-text{display:grid;gap:2px;min-width:0}.tl-row-name{color:var(--ink);font-size:15.5px;font-weight:620;letter-spacing:-.01em}a.tl-row-name:hover{color:var(--accent-deep)}.tl-row-copy{display:-webkit-box;overflow:hidden;color:var(--ink-soft);font-size:14px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}.tl-row-go{width:16px;height:16px;color:var(--ink-soft);opacity:0;transition:opacity .2s,transform .2s var(--ease-out)}a.tl-row:hover .tl-row-go{opacity:1;transform:translateX(2px)}.tl-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--paper-2);color:var(--ink)}.tl-icon svg{width:19px;height:19px;stroke-width:1.7}.tl-icon-plan{background:var(--sky-tint);color:var(--sky)}.tl-icon-film{background:var(--tomato-tint);color:var(--tomato)}.tl-icon-format{background:var(--sage-tint);color:var(--sage)}.tl-icon-publish{background:var(--accent-wash);color:var(--accent-deep)}.tl-family-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.tl-family-links a{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink-2);font-size:13px;font-weight:550;transition:border-color .2s,color .2s,background-color .2s}.tl-family-links a:hover{border-color:var(--ink);color:var(--ink);background:var(--paper)}.tl-more{max-width:1080px;margin:18px auto 0}.tl-handoff{display:grid;justify-items:start;gap:10px}.tl-handoff-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:999px;background:var(--white);color:var(--ink);font-size:15px;font-weight:600;transition:background-color .2s}.tl-handoff-button:hover{background:var(--paper-2)}.tl-handoff-button:focus-visible{outline:3px solid var(--accent-glow);outline-offset:3px}.tl-handoff-button svg{width:17px;height:17px;transition:transform .2s var(--ease-out)}.tl-handoff-button:hover svg{transform:translateX(3px)}.tl-handoff-note{max-width:420px}.tl-handoff-info,.tl-handoff-note{color:var(--ink-soft);font-size:13.5px;line-height:1.5}.tl-handoff-info a{color:var(--ink-2);font-weight:550;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}.tl-handoff-info a:hover{text-decoration-color:var(--accent)}@media (max-width:900px){.tl-ar,.tl-list{grid-template-columns:minmax(0,1fr)}}@media (max-width:560px){.tl-bench{margin-inline:-4px;border-radius:22px}.tl-presets{gap:6px}.tl-preset{padding:10px 2px 8px;border-radius:12px}.tl-preset-name{font-size:10.5px}.tl-lineup{grid-template-columns:minmax(0,1fr);gap:14px}.tl-lineup li{grid-template-columns:104px minmax(0,1fr);align-items:center;gap:14px}.tl-lineup-shape{width:auto;height:58px;justify-self:start}.tl-lineup-ratio{font-size:15px}.tl-table thead{display:none}.tl-table,.tl-table tbody,.tl-table td,.tl-table th,.tl-table tr{display:block}.tl-table tr{padding:14px 16px;border-bottom:1px solid var(--line)}.tl-table tr:last-child{border-bottom:0}.tl-table td,.tl-table th{padding:2px 0;border:0}.tl-table tbody th{font-size:18px;white-space:normal}.tl-table td:before{content:attr(data-label) " · ";color:var(--ink-soft);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em}}@media (prefers-reduced-motion:reduce){.tl-frame,.tl-preset,.tl-row,.tl-row-go{transition:none}.tl-result-ratio{animation:none}}}@layer utilities{.lv2 .tl-input{height:48px;padding-inline:16px 40px;border-color:var(--line-strong);border-radius:14px;background:var(--white);color:var(--ink);font-size:17px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;box-shadow:none}.lv2 .tl-ratio-row .tl-input{padding-right:16px;text-align:center}.lv2 .tl-input:focus-visible{border-color:var(--sky);box-shadow:0 0 0 4px var(--accent-glow)}.lv2 .tl-input[aria-invalid]{border-color:var(--tomato);box-shadow:0 0 0 3px var(--tomato-tint)}}