.note{border:1px solid var(--rule);border-radius:var(--r-card);background:var(--white);grid-template-columns:auto 1fr;align-items:start;gap:14px;max-width:520px;padding:18px 20px;display:grid}.note .tag{margin-top:2px}.note p{color:var(--ink-2);font-size:15px}.excase{border-top:1px solid var(--rule);grid-template-columns:7fr 5fr;align-items:center;gap:56px;padding:72px 0;display:grid}.excase:first-child{border-top:0;padding-top:24px}.excase--flip{grid-template-columns:5fr 7fr}.excase--flip .excase__shots{order:2}.excase__shots{padding:0 28px 44px 0;position:relative}.browser{background:var(--white);border:1px solid #cfccd9;border-radius:12px;overflow:hidden}.browser__bar{border-bottom:1px solid var(--rule);align-items:center;gap:6px;height:34px;padding:0 12px;display:flex}.browser__bar i{background:#d9d7e0;border-radius:50%;width:9px;height:9px;display:block}.browser__bar b{background:var(--mist);border-radius:5px;flex:1;max-width:260px;height:18px;margin-left:12px;display:block}.browser .ph{aspect-ratio:16/10;align-items:flex-start}.browser .shot{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%;height:auto;display:block}.excase .phoneframe{border-radius:26px;width:150px;max-width:none;padding:7px;position:absolute;bottom:0;right:0}.excase .phoneframe .ph,.excase .phoneframe .shot{border-radius:20px}.excase__body{align-content:start;gap:14px;display:grid}.excase__tags{flex-wrap:wrap;gap:8px;display:flex}.excase__meta{border-top:1px solid var(--rule)}.excase__meta div{border-bottom:1px solid var(--rule);justify-content:space-between;gap:16px;padding:10px 0;font-size:15px;display:flex}.excase__meta dt{color:var(--ink-2)}.excase__meta dd{text-align:right;font-weight:500}.three{grid-template-columns:repeat(3,1fr)}.three>div{align-content:start;gap:10px;padding:28px 32px;display:grid}.three .ic{width:24px;height:24px;color:var(--violet);margin-bottom:8px}@media (width<=1179px) and (width>=701px){.excase,.excase--flip{grid-template-columns:1fr 1fr;gap:40px;padding:56px 0}.excase__shots{padding:0 20px 40px 0}.excase .phoneframe{border-radius:22px;width:112px;padding:6px}.excase .phoneframe .ph,.excase .phoneframe .shot{border-radius:16px}.three>div{padding:24px}}@media (width<=700px){.excase,.excase--flip{grid-template-columns:1fr;gap:28px;padding:48px 0}.excase--flip .excase__shots{order:0}.excase__shots{padding:0 18px 36px 0}.excase .phoneframe{border-radius:20px;width:104px;padding:5px}.excase .phoneframe .ph,.excase .phoneframe .shot{border-radius:15px}.three{grid-template-columns:1fr}.three>div{padding:24px}}