.device[data-demo=rowwise] { border:0; color:#fff; outline:2px solid #514b48; font-family:-apple-system,system-ui,sans-serif; letter-spacing:0; }
[data-demo=rowwise] .device-screen { inset:0; background:radial-gradient(ellipse 140% 67% at 50% 0%,#27211f 0%,#151211 52%,#000 100%); box-shadow:none; }
[data-demo=rowwise] .status { top:23px; left:56px; right:35px; height:20px; line-height:20px; font-size:17px; font-weight:600; letter-spacing:0; }
[data-demo=rowwise] .status > svg { width:79px; height:14px; }
[data-demo=rowwise] .layer:not(.lock-layer) { inset:116px 20px 42px; padding:0; }
[data-demo=rowwise] .bar { position:absolute; top:-54px; left:-20px; width:402px; height:54px; font-size:17px; font-weight:600; display:block; }
[data-demo=rowwise] .bar > :nth-child(2) { position:absolute; top:11.667px; left:0; width:100%; line-height:20.667px; pointer-events:none; }
[data-demo=rowwise] .nav-glass { position:absolute; top:0; left:16px; width:44px; height:44px; border:0; background:rgb(255 255 255 / .02); box-shadow:inset 0 0 0 .7px #ffffff20; }
[data-demo=rowwise] .nav-glass svg { width:24px; height:24px; }
[data-demo=rowwise] .menu-glyph { left:346px; top:4px; width:36px; height:36px; background:none; box-shadow:none; color:#a58e87; }
[data-demo=rowwise] .menu-glyph::before { content:""; position:absolute; inset:-4px; border-radius:50%; background:#ffffff02; box-shadow:inset 0 0 0 .7px #ffffff20; }
[data-demo=rowwise] .menu-glyph svg { width:24px; height:24px; }
[data-demo=rowwise] .done { padding:0; height:91px; flex:none; gap:8px; }
[data-demo=rowwise] .big { font-size:64px; font-weight:300; height:76.667px; line-height:76.667px; width:max-content; font-family:ui-rounded,-apple-system,system-ui,sans-serif; }
[data-demo=rowwise] .big .digit { width:.5989583em; height:76.667px; line-height:76.667px; }
[data-demo=rowwise] .big-label { font-size:12px; line-height:14.333px; color:#99979c; width:max-content; }
[data-demo=rowwise] .lock { padding:0; width:173.333px; min-width:0; height:44px; justify-content:flex-end; gap:8.333px; color:#a58e87; line-height:18px; }
[data-demo=rowwise] .lock svg { width:11.333px; height:16.333px; overflow:visible; }
[data-demo=rowwise] .lock span { font-size:15px; line-height:18px; letter-spacing:-.3px; }
[data-demo=rowwise] .nextrow { border-radius:16px; background:rgb(165 142 135 / .16); box-shadow:inset 0 0 0 .5px rgb(165 142 135 / .55); }
[data-demo=rowwise] .nextrow[data-empty] { margin-bottom:-8px; }
[data-demo=rowwise] .strip-items { padding:12px; min-height:68px; gap:8px; }
[data-demo=rowwise] .strip-message { font-size:15px; line-height:18px; font-weight:500; letter-spacing:-.3px; flex:1; }
[data-demo=rowwise] .strip-prefix { color:#aaa6ac; }
[data-demo=rowwise] .more { font-size:15px; line-height:18px; min-height:18px; height:18px; font-weight:600; letter-spacing:-.3px; color:#a58e87; }
[data-demo=rowwise] .tiles { height:208px; flex:none; grid-template-rows:99.667px 99.667px; gap:8px; }
[data-demo=rowwise] .tile { position:relative; min-height:0; height:99.667px; padding:12px; border:0; border-radius:16px; background:linear-gradient(160deg,#ffffff14,#ffffff15); box-shadow:inset 0 0 0 .7px #ffffff28; }
[data-demo=rowwise] .tile.hit { box-shadow:inset 0 0 0 1.5px rgb(165 142 135 / .85); }
[data-demo=rowwise] .tile-content { height:75.667px; display:flex; flex-direction:column; gap:4px; }
[data-demo=rowwise] .tile b { font-size:15px; font-weight:700; line-height:18px; width:max-content; max-width:100%; letter-spacing:-.3px; }
[data-demo=rowwise] .tile .v { font-size:20px; min-height:34px; height:34px; line-height:34px; font-weight:400; letter-spacing:0; }
[data-demo=rowwise] .tile .s { min-height:15.667px; height:15.667px; font-size:13px; line-height:15.667px; color:#a5a4a5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-wrap:nowrap; letter-spacing:-.08px; }
[data-demo=rowwise] .tassel-controls { position:absolute; right:12px; top:28px; height:44px; }
[data-demo=rowwise] .tassel-controls button { display:grid; place-items:center; width:44px; height:44px; padding:5px; border:0; background:none; position:relative; }
[data-demo=rowwise] .tassel-controls button::before { content:""; position:absolute; inset:5px; border-radius:50%; background:#ffffff08; }
[data-demo=rowwise] .tassel-controls svg { width:17px; height:17px; stroke-width:3; }
[data-demo=rowwise] .add, [data-demo=rowwise] .undo, [data-demo=rowwise] .resume { border:0; border-radius:22px; box-shadow:inset 0 0 0 .7px #ffffff30; background:linear-gradient(180deg,#ffffff15,#ffffff20); }
[data-demo=rowwise] .add { position:relative; min-height:0; padding:0; gap:16px; font-size:22px; line-height:26.333px; font-weight:700; }
[data-demo=rowwise] .add .plus { display:grid; place-items:center; width:40.667px; height:40.667px; line-height:40.667px; }
[data-demo=rowwise] .add .plus svg { width:27.667px; height:27.667px; stroke-width:2.5; overflow:visible; }
[data-demo=rowwise] .undo { position:relative; min-height:56px; height:56px; padding:0; font-size:17px; line-height:20.333px; display:flex; align-items:center; justify-content:center; gap:10px; }
[data-demo=rowwise] .undo svg { width:14px; height:1.667px; overflow:visible; stroke-width:2.5; }
[data-demo=rowwise] .undo:disabled { color:#99979c; opacity:.4; }
[data-demo=rowwise] .message-popover { width:244px; right:85px; top:50%; padding:16px; border-radius:36px; background:rgb(32 29 27); box-shadow:inset 0 0 0 .7px #ffffff20,0 8px 18px #0002; }
[data-demo=rowwise] .message-popover::before { right:-11px; width:20px; height:20px; top:calc(50% - 10px); border-radius:4px; }
[data-demo=rowwise] .popover-heading { font-size:13px; line-height:15.667px; color:#a5a4a5; margin:0 0 12px; }
[data-demo=rowwise] .popover-items p { font-size:17px; line-height:20.333px; gap:8px; letter-spacing:-.4px; white-space:nowrap; }
[data-demo=rowwise] .popover-items svg { width:22px; height:20.333px; stroke-width:1.7; }
[data-demo=rowwise] .counting-menu { top:-54px; right:-12px; width:250px; height:377px; padding:10px 0; border-radius:36px; background:rgb(29 26 25 / .98); }
[data-demo=rowwise] .counting-menu button { position:relative; height:42px; padding:0 24px 0 60px; gap:0; border-radius:0; font-size:17px; line-height:20px; font-weight:400; letter-spacing:-.4px; }
[data-demo=rowwise] .counting-menu button:disabled { opacity:.45; }
[data-demo=rowwise] .counting-menu svg { position:absolute; left:25px; top:10px; width:22px; height:22px; color:#a58e87; }
[data-demo=rowwise] .counting-menu button:nth-last-child(2) { margin-top:21px; border:0; }
[data-demo=rowwise] .counting-menu button:nth-last-child(2)::before { content:""; position:absolute; top:-11px; left:24px; right:24px; height:1px; background:#ffffff14; }
[data-demo=rowwise] .counting-menu button.destructive { color:#ff454b; }
[data-demo=rowwise] .finished-layer .record-focus { margin:28px 0 0; padding:0; }
[data-demo=rowwise] .record-summary .record-title { font-size:28px; line-height:33.667px; margin:0 0 8px; gap:10px; font-weight:700; color:#fff; }
[data-demo=rowwise] .record-title svg { width:30px; height:30px; stroke-width:2.7; }
[data-demo=rowwise] .record-summary p { font-size:20px; line-height:24px; letter-spacing:-.45px; color:#99979c; }
[data-demo=rowwise] .finished-layer .record-label { font-size:13px; line-height:15.667px; margin:24px 0 8px; font-weight:400; color:#99979c; }
[data-demo=rowwise] .finished-layer dl { gap:8px; font-size:17px; line-height:20.333px; letter-spacing:-.4px; }
[data-demo=rowwise] .finished-layer dd { color:#99979c; }
[data-demo=rowwise] .resume { margin-top:24px; height:56px; padding:0; font-size:17px; font-weight:600; }
[data-demo=rowwise] .activity { border:0; padding:18px; }
[data-demo=rowwise] .activity-title { line-height:20.333px; }
[data-demo=rowwise] .activity-title b { font-weight:600; }
[data-demo=rowwise] .activity-title small { font-size:12px; font-weight:700; }
[data-demo=rowwise] .activity-count { margin-top:12px; }
[data-demo=rowwise] .activity-count button { display:grid; place-items:center; background:#ffffff14; }
[data-demo=rowwise] .activity-count svg { width:18px; height:18px; }
[data-demo=rowwise] .activity-count [data-roll] { font-size:34px; line-height:41px; font-variant-numeric:tabular-nums; }
[data-demo=rowwise] .notice { margin-top:12px; font-size:15px; line-height:18px; }
[data-demo=rowwise] .big { display:block; }
[data-demo=rowwise] .device-screen { background:linear-gradient(to bottom,transparent 50%,rgb(255 255 255 / .06)),radial-gradient(circle 520px at 50% 0%,rgb(153 129 123 / .28),transparent); background-color:#000; }
[data-demo=rowwise] .bar > :nth-child(2) { left:50%; translate:-50% 0; width:max-content; }
[data-demo=rowwise] .lock span { letter-spacing:0; }
[data-demo=rowwise] .strip-message { white-space:pre-wrap; flex:0 1 auto; letter-spacing:0; }
[data-demo=rowwise] .more { margin-left:auto; letter-spacing:0; }
[data-demo=rowwise] .tile b { letter-spacing:-.16px; }
[data-demo=rowwise] .tile .s { width:max-content; max-width:153px; white-space:pre; letter-spacing:0; }
[data-demo=rowwise] .undo { gap:8px; background:rgb(255 255 255 / .085); }
[data-demo=rowwise] .add-label { transform:translateY(-4px); }
[data-demo=rowwise] .tile .v { width:max-content; min-height:24px; height:24px; line-height:24px; margin:5px 0; }
[data-demo=rowwise] .record-summary p, [data-demo=rowwise] .record-label, [data-demo=rowwise] .record-title, [data-demo=rowwise] .popover-heading { width:max-content; }
[data-demo=rowwise] .popover-items p { width:max-content; }
[data-demo=rowwise] .record-title { margin-left:2.333px!important; gap:9px!important; }
[data-demo=rowwise] .record-summary p { letter-spacing:0; }
[data-demo=rowwise] .popover-items p { letter-spacing:0; }
[data-demo=rowwise] .popover-items p:first-child { margin-left:2px; gap:10px; }
[data-demo=rowwise] .popover-items p:first-child svg { width:18.333px; height:17.333px; translate:0 1px; }
[data-demo=rowwise] .popover-items p:nth-child(2) svg { width:20.667px; height:17px; translate:0 .5px; }
[data-demo=rowwise] .counting-menu [data-symbol=stack] { left:26.667px; top:10.667px; width:18.667px; height:22.667px; }
[data-demo=rowwise] .counting-menu [data-symbol=bubble] { left:25px; top:12px; width:22.333px; height:19.333px; }
[data-demo=rowwise] .counting-menu [data-symbol=pencil] { left:27.333px; top:13.667px; width:17.333px; height:15.333px; }
[data-demo=rowwise] .counting-menu [data-symbol=number] { left:26.667px; top:12px; width:19px; height:18.333px; }
[data-demo=rowwise] .counting-menu [data-symbol=sun] { left:25.667px; top:11px; width:20.667px; height:20.333px; }
[data-demo=rowwise] .counting-menu [data-symbol=check] { left:26.333px; top:11.667px; width:19.667px; height:19px; }
[data-demo=rowwise] .counting-menu [data-symbol=reset] { left:27.333px; top:10.333px; width:17.333px; height:20px; }
[data-demo=rowwise] .counting-menu [data-symbol=trash] { left:26.667px; top:10.333px; width:19px; height:20.667px; }
[data-demo=rowwise] .finished-layer dl, [data-demo=rowwise] .counting-menu button { letter-spacing:0; }
[data-demo=rowwise] .tassel-controls svg { width:14.5px; height:14.5px; translate:-.2px -.667px; stroke-width:3; }
[data-demo=rowwise] .nav-glass:not(.menu-glyph) svg { width:22px; height:22px; translate:0 .5px; }
[data-demo=rowwise] .app-layer .menu-glyph[aria-expanded=true] { z-index:13; }
[data-demo=rowwise] .app-layer .menu-glyph[aria-expanded=true] svg, [data-demo=rowwise] .app-layer .menu-glyph[aria-expanded=true]::before { opacity:0; }
.inline-shot .snapshot { position:relative; padding:0; background:none; max-height:none; }
.inline-shot .snapshot::after { content:""; display:block; width:100%; background-size:contain; background-position:left top; background-repeat:no-repeat; }
.inline-shot .snapshot > * { position:absolute; visibility:hidden; }
.crop-1 .snapshot::after { background-image:url('/assets/img/99cdd05d7cfa/rowwise-crop-1.png'); aspect-ratio:402/200; }
.crop-2 .snapshot::after { background-image:url('/assets/img/815028f21988/rowwise-crop-2.png'); aspect-ratio:402/171; }
.crop-3 .snapshot::after { background-image:url('/assets/img/bd6416d4f335/rowwise-crop-3.png'); aspect-ratio:402/124; }
.crop-4 .snapshot::after { background-image:url('/assets/img/317d80306dec/rowwise-crop-4.png'); aspect-ratio:402/92; }
.crop-5 .snapshot::after { background-image:url('/assets/img/ae26590c2489/rowwise-crop-5.png'); aspect-ratio:402/243; }
[data-demo=rowwise] .big { font-family:ui-rounded,system-ui,sans-serif; }
[data-demo=rowwise] .add { background:linear-gradient(180deg,#ffffff15,#ffffff15); }
[data-demo=rowwise] .big .digit.leaving { width:0; }
@starting-style {
[data-demo=rowwise] .big .digit { width:0; }
}
@supports (font:-apple-system-body) {
[data-demo=rowwise] .big .digits { translate:0 -1.333px; }
}
[data-demo=rowwise] .tassel-controls button:disabled::before { background:transparent; }
.device[data-demo=rowwise] { border-radius:55px; outline:0; box-shadow:0 0 0 11px #060606,0 0 0 12px #34302d,0 0 0 13px #6d645f,0 30px 60px -18px #000d; }
[data-demo=rowwise] .device-screen { border-radius:55px; }
.device[data-demo=rowwise] .side-buttons { left:-16px; }
.device[data-demo=rowwise]::after { right:-16px; }
[data-demo=rowwise] .lock, [data-demo=rowwise] .more { color:#d9a79a; }
[data-demo=rowwise] .more { position:relative; }
[data-demo=rowwise] .more::after { content:""; position:absolute; inset:50% 0 auto; translate:0 -50%; min-height:calc(24px / var(--phone-scale)); height:44px; }
[data-demo=rowwise] .menu-glyph::after { content:""; position:absolute; inset:50% auto auto 50%; translate:-50% -50%; width:calc(24px / var(--phone-scale)); height:calc(24px / var(--phone-scale)); min-width:44px; min-height:44px; }
[data-demo=rowwise] .counting-menu button::after { content:""; position:absolute; inset:50% 0 auto; translate:0 -50%; height:max(42px,calc(24px / var(--phone-scale))); }
/* Story crops on narrow screens: each crop is the app's full 402pt width, so pull out its built-in side margin and let card, caption and step text share one left edge. */
.inline-shot { --inset:20; }
.crop-2 { --inset:34; }
@media (max-width:1000px), (max-height:707px) {
  .inline-shot, html:not(.js) .inline-shot { grid-column:2; width:100%; max-width:340px; overflow:hidden; }
  .inline-shot .snapshot { width:calc(100% * 402 / (402 - 2 * var(--inset))); margin-left:calc(-100% * var(--inset) / (402 - 2 * var(--inset))); }
}
html:not(.js) .inline-shot .snapshot { width:calc(100% * 402 / (402 - 2 * var(--inset))); margin-left:calc(-100% * var(--inset) / (402 - 2 * var(--inset))); }