/* This composition belongs only to the tin-can sandbox case. */
.tin-toolbar{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:28px;font-size:15px}
.tin-toolbar .button{min-height:44px;padding:10px 16px;font-size:15px;font-weight:400;line-height:22px;white-space:nowrap}
.tin-toolbar .tin-back{margin-right:auto}.tin-toolbar .tin-next{margin-left:auto}
.tin-back,.tin-next{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
.tin-toolbar .tin-secondary{border-color:var(--ink);background:transparent;color:var(--ink)}
.tin-toolbar .tin-secondary:hover{background:var(--soft)}.tin-back:hover,.tin-next:hover{color:var(--accent)}
.tin-heading h1{max-width:1050px;margin:12px 0 18px}.tin-heading .case-lead{max-width:970px;margin-bottom:28px}
.tin-intro{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:24px;align-items:start}
.tin-panel{background:var(--soft);border:1px solid var(--line);padding:28px;max-width:none}
.tin-panel-heading{display:flex;gap:16px;align-items:center;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #dce2eb}
.tin-symbol{display:flex;flex:0 0 44px;width:44px;height:44px;align-items:center;justify-content:center;background:#e7edf6;color:#244976}
.tin-symbol svg{width:30px;height:30px}
.tin-panel-heading h2,.tin-panel-heading h3{font-size:26px;line-height:1.2;margin:0;color:var(--ink)}
.tin-panel.case-prose p,.tin-panel.case-prose li{line-height:1.6}
.tin-panel.case-prose p+p{margin-top:16px}
.tin-case p,.tin-case li,.tin-case dt,.tin-case dd{text-indent:0!important;text-align:left!important}
.tin-story .case-prose h3{font-size:18px;font-weight:500;line-height:1.35;color:var(--ink);margin:24px 0 8px}
.tin-constraints{margin-top:22px;border-top:1px solid #dce2eb}
.tin-constraints summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0 0;min-height:44px;cursor:pointer;list-style:none;color:var(--ink)}
.tin-constraints summary::-webkit-details-marker{display:none}
.tin-constraints summary span{font-size:24px;color:var(--accent);line-height:1}
.tin-constraints[open] summary span{transform:rotate(45deg)}.tin-constraints>div{padding-top:18px}
.tin-case .case-facts{background:var(--soft);padding:24px;border:1px solid var(--line);margin-top:28px}
.tin-case .case-top{padding-bottom:0}
.tin-story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.tin-story .case-prose ul{list-style:square}
.tin-components{background:#fff}.tin-components-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tin-unit{border:1px solid var(--line);padding:26px;background:#fff;min-width:0}
.tin-unit .tin-panel-heading{align-items:center}.tin-unit h3{font-size:24px}
.tin-unit dl{margin:0}.tin-unit dl>div+div{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.tin-unit dt{font-weight:500;line-height:1.4;margin-bottom:6px;color:var(--ink)}
.tin-unit dd{margin:0;color:var(--muted);line-height:1.55}
.tin-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/2.4);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:1px;padding:4px 1px 16px;overscroll-behavior-x:contain;scrollbar-color:#b5bfcd var(--soft)}
.tin-rail .case-card{scroll-snap-align:start}.tin-rail-controls{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:12px}
.tin-rail-controls[hidden]{display:none}.tin-rail-controls>span{font-size:14px;color:var(--muted);margin-right:8px}
.tin-rail-controls button{height:44px;width:44px;cursor:pointer;background:#fff;border:1px solid var(--line);color:var(--ink);font:inherit}
.tin-rail-controls button:disabled{opacity:.35;cursor:default}
@media(max-width:1050px){.tin-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px}.tin-toolbar .tin-back{grid-column:1;grid-row:1}.tin-toolbar .tin-next{grid-column:2;grid-row:1;justify-self:end}.tin-toolbar .tin-primary{grid-column:1;grid-row:2}.tin-toolbar .tin-secondary{grid-column:2;grid-row:2}.tin-panel,.tin-unit{padding:22px}.tin-panel-heading{gap:12px}.tin-panel-heading h2,.tin-unit h3{font-size:24px}.tin-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}.tin-story,.tin-components-grid{gap:20px}.tin-case .case-facts{padding:20px}.tin-rail{grid-auto-columns:calc((100% - 24px)/1.65)}}
@media(max-width:850px){.tin-intro{grid-template-columns:1fr}.tin-task .tin-panel-heading{margin-bottom:16px}.tin-heading .case-lead{font-size:17px}.tin-story .tin-panel-heading{align-items:flex-start}.tin-case .case-facts dd span{display:block;font-size:15px;margin-top:6px}}
@media(max-width:700px){.tin-toolbar{gap:6px 10px;margin-bottom:24px;padding-bottom:16px;font-size:14px}.tin-toolbar .button{font-size:14px;padding:9px 12px}.tin-toolbar .tin-primary{grid-column:1/-1;grid-row:2}.tin-toolbar .tin-secondary{grid-column:1/-1;grid-row:3}.tin-heading h1{font-size:32px}.tin-heading .case-lead{font-size:16px}.tin-story,.tin-components-grid{grid-template-columns:1fr;gap:16px}.tin-panel,.tin-unit{padding:20px}.tin-panel-heading h2,.tin-unit h3{font-size:23px}.tin-panel-heading{padding-bottom:16px;margin-bottom:16px}.tin-case .case-facts{padding:20px;gap:24px 16px}.tin-case .case-facts dt{font-size:13px}.tin-case .case-facts dd{font-size:30px}.tin-rail{grid-auto-columns:88%;gap:16px}.tin-rail .case-card h2{font-size:22px}.tin-case .section{scroll-margin-top:16px}}