/* Exactly two product footprints: a square widget and a 402 × 874 app. */
.surface-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;border-bottom:1px solid #ddd;background:#f7f7f7;min-height:62px}
.surface-controls select{font-size:12px;max-width:50%}.surface-controls .segmented button{min-width:64px}
.surface-stage{padding:30px 24px;min-height:540px;display:flex;justify-content:center;align-items:flex-start}.widget-stage{justify-content:flex-start}
.preset-tile{width:235px;max-width:100%;padding:12px;flex:none}
.square-widget{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:10px;aspect-ratio:1;width:100%;padding:18px;border-radius:28px;border:1px solid #fff;background:linear-gradient(140deg,#ffffffed,#ffffff85);box-shadow:inset 0 1px 2px #fff,0 2px 3px #00000005,0 12px 22px #00000010;overflow:hidden}
.tile-label{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.3;color:#555}.tile-label .icon{width:14px;height:14px}
.tile-number{font-family:Kalice,Georgia,serif;font-size:48px;letter-spacing:-1.8px;line-height:1.04;color:var(--ink,#202020);font-variant-numeric:tabular-nums}.tile-number small{font-family:Selecta,system-ui;font-size:12px;letter-spacing:0;margin-left:5px;color:#666}.tile-number.tile-money{font-size:39px}
.tile-meta,.tile-foot{font-size:12px;line-height:1.4;color:#555}.tile-foot{margin-top:auto;padding-right:12px}.tile-open{position:absolute;bottom:14px;right:16px;color:#777;font-size:13px}.tile-heading{font-size:22px;font-family:Kalice,Georgia;line-height:1.1}
.tile-lines{display:grid;gap:7px;font-size:10px;line-height:1.3}.tile-lines>span{display:flex;gap:6px;align-items:center}.tile-lines i{width:10px;height:10px;border:1px solid #ccc;flex:none;border-radius:3px;font-style:normal}.tile-done{color:#888;text-decoration:line-through}
.tile-lines .tile-task-copy{min-width:0;overflow-wrap:anywhere}.tile-task-copy small{display:block;font:inherit;font-size:9px;line-height:1.3;margin-top:2px;color:inherit;opacity:1}.tile-lines .tile-overdue{font-weight:500}
.tile-bars{height:44px;display:flex;align-items:flex-end;gap:4px}.tile-bars i{background:var(--ink,#444);opacity:.7;width:8px;height:var(--bar);border-radius:3px}.tile-bars i.unknown{background:#c8c8c8}
.tile-progress{height:6px;border-radius:8px;background:#ddd;overflow:hidden;margin-top:6px}.tile-progress i{display:block;height:100%;background:var(--ink,#444);border-radius:8px}.tile-options{font-size:10px;line-height:1.4;display:grid;gap:5px}.tile-bubbles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:133px;max-width:100%;margin:auto;pointer-events:none}.tile-bubbles .bubble{width:100%;display:block}
.full-app-frame,.original-app{position:relative;width:min(100%,365px);aspect-ratio:402/874;height:auto;min-height:0;flex:none;overflow:hidden;border:0;border-radius:48px;background:#fff;box-shadow:0 0 0 1px #00000008,0 2px 4px #00000008,0 14px 40px #00000018;color-scheme:light}
.device-screen{position:absolute;inset:0 auto auto 0;display:flex;flex-direction:column;width:402px;height:874px;transform:scale(var(--device-scale,1));transform-origin:top left;background:linear-gradient(160deg,#fff,var(--base,#f6f6f6));overflow:hidden}
.device-status{height:55px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:14px 32px 0;font-size:14px;font-weight:500}.device-status>span:last-child{font-size:12px;letter-spacing:3px}
.device-screen>.app-header{height:60px;min-height:60px;padding:8px 24px 16px;background:none;border-bottom:1px solid #0000000b}.device-screen .app-identity{font-size:17px}.device-screen .app-more{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#fff,#f2f2f2);box-shadow:var(--raised);border:1px solid #e5e5e5}.device-screen .app-more .icon{width:16px;height:16px}
.device-screen>.mini-app{flex:1;min-height:0;height:auto;max-height:none;overflow:auto;border:0;border-radius:0;box-shadow:none;background:none;scrollbar-width:thin}.device-screen .app-body{padding:25px 24px 40px;min-height:100%;box-sizing:border-box}.device-screen .screen-title{font-size:31px;line-height:1.12}.device-screen .screen-description{font-size:15px;line-height:1.5}.device-screen .large-number{font-family:Kalice,Georgia;font-size:64px;line-height:1.15;letter-spacing:-1.5px;margin:24px 0}.device-screen .large-number small{font-size:16px;letter-spacing:0;font-family:Selecta;margin-left:7px}.device-screen .widget-label{display:flex;gap:8px;align-items:center;font-size:15px}.device-screen .primary,.device-screen .secondary{font-size:15px;min-height:46px}.device-screen .row-text b{font-size:15px}.device-screen .row-text small{font-size:12px}.device-screen .app-notice{font-size:13px}.device-screen .app-form label{font-size:14px}.device-screen input,.device-screen select{font-size:16px}.device-screen .check-control{min-width:32px;min-height:32px}.device-home{height:26px;flex:none;position:relative}.device-home:after{content:'';position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:130px;height:5px;background:#202020;border-radius:9px}
.story-workbench{background-color:#f1f1f1;background-image:radial-gradient(#0000000d .7px,transparent .7px);background-size:14px 14px;min-height:100%}.story-comparison{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:24px;max-width:1050px;margin:auto}.story-lane{min-width:0;display:flex;flex-direction:column;align-items:center}.story-lane-label{font-size:12px;color:#666;margin-bottom:16px}.story-result{display:flex;justify-content:center;align-items:center;width:100%;flex:1;min-height:0}.story-messages{padding:28px 24px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:18px}.story-compose{margin:10px 24px 5px;border:1px solid #ddd;border-radius:30px;padding:12px 14px;display:flex;justify-content:space-between;color:#888;font-size:15px}.story-compose span{border-radius:50%;background:#e4e4e4;color:#777;width:24px;height:24px;display:grid;place-items:center}
.story-transport{position:sticky;bottom:0;background:#fafafa;border-top:1px solid #ddd;padding:14px 24px;z-index:2}.story-buttons{display:flex;gap:8px;align-items:center;margin-bottom:14px}.story-buttons>span{font-size:12px;color:#666;margin-left:8px}.story-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.story-steps button{display:flex;gap:8px;align-items:center;padding:10px 8px;font-size:12px;border-top:3px solid #ddd;text-align:left;min-width:0;line-height:1.4}.story-steps small{font-size:10px;color:#888}.story-steps button[aria-current=step]{border-color:var(--blue);color:var(--blue)}.story-context{font-size:12px;color:#666;margin:12px 0 0;line-height:1.4}.original-story-stage{height:max(700px,calc(100dvh - 232px));min-width:0;background:#f1f1f1}.original-story{width:100%;height:100%;display:block;border:0;background:#f1f1f1}
@media(max-width:740px){.surface-controls{padding:12px 16px;gap:8px}.surface-controls .segmented button{min-width:57px;padding-inline:8px}.surface-controls select{max-width:43%;padding:8px 5px;font-size:12px}.surface-stage{padding:24px 16px;min-height:400px}.preset-tile{width:235px}.story-comparison{grid-template-columns:minmax(0,1fr);gap:28px;padding:22px 16px}.story-lane{width:100%}.story-result{min-height:250px}.story-transport{position:static;padding:16px}.story-steps{display:flex;overflow:auto;scrollbar-width:thin}.story-steps button{flex:1;min-width:92px}.original-story-stage{height:820px}.full-app-frame,.original-app{border-radius:44px}.surface-controls+.workbench{min-height:calc(100% - 65px)}}
@media(prefers-reduced-motion:reduce){.square-widget{transition:none;transform:none!important}}

@media(min-width:741px){.full-app-frame,.original-app{width:min(100%,365px,calc((100dvh - 292px)*402/874))}.story-comparison .full-app-frame{width:min(100%,365px,calc((100dvh - 460px)*402/874))}.story-comparison{padding-block:20px}.story-lane-label{margin-bottom:12px}}

.original-grid{grid-template-columns:repeat(auto-fill,235px);gap:22px 24px}.original-card{width:235px;max-width:100%}.original-widget{aspect-ratio:1}.original-widget-wrap{width:100%;aspect-ratio:1}
@media(max-width:740px){.original-grid{grid-template-columns:repeat(auto-fill,minmax(155px,235px));justify-content:center}.original-card{width:235px}.widget-stage{justify-content:center}}

.device-status .status-icons{display:flex;gap:5px;align-items:center}.device-status .status-icons svg{width:19px;height:13px;fill:currentColor}.device-status .status-icons svg.status-battery{width:27px}.device-status .status-icons svg.status-wifi{width:18px}
/* Compact, reversible actions in the four starter apps. */
.device-screen .starter-task{display:flex;align-items:center;gap:8px;border-bottom:1px solid #e2e2e2}
.device-screen .starter-task:last-child{border-bottom:0}
.device-screen .starter-task>.check-item{flex:1;min-width:0;border:0}
.device-screen .check-control{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:13px;background:linear-gradient(#fff,#f5f5f5);box-shadow:inset 0 1px #fff,0 1px 2px #00000005}
.device-screen .check-control::before{inset:0}
.device-screen .check-item.done .check-control{background:#246bfe;border-color:#246bfe;color:#fff}
.device-screen .check-item.done b{color:#616161}
.device-screen :is(.task-move,.contribution-undo){width:44px;height:44px;display:inline-grid;place-items:center;border-radius:50%;color:#616161;flex:none}
.device-screen :is(.task-move,.contribution-undo) .icon{width:17px;height:17px}
.device-screen .receipt-line{align-items:center;min-height:54px}
.device-screen .receipt-line>span:last-child{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.device-screen .app-section-label button{min-width:44px;min-height:44px;color:#246bfe}
.device-screen .tracker-grid{gap:7px}
.device-screen .day{min-height:54px;border-color:#ddd;background:#fff}
.device-screen .day.logged{background:#eee}
.device-screen .day.today{outline:2px solid #246bfe;outline-offset:1px}
.device-screen .inline-form input{min-width:0;min-height:46px}
.device-screen .inline-form .btn{min-height:46px;flex:none;background:linear-gradient(#454545,#252525);box-shadow:inset 0 1px #ffffff38,0 2px 3px #00000014;color:#fff}
.device-screen :is(.row-text small,.money-hero small,.screen-label,.money-hero .eyebrow,.app-notice){color:#616161}
.device-screen .money-hero .amount{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.device-screen :is(.screen-title,.receipt-line){overflow-wrap:anywhere}
.device-screen .text-button{min-height:44px}
.device-screen button:focus-visible{outline:2px solid #246bfe;transform:none;transition:none}
@media(hover:hover) and (pointer:fine){.device-screen :is(.task-move,.contribution-undo):hover{background:#eee;color:#171717}}
.device-screen>.app-header{padding-block:8px}
.device-screen .app-more{width:44px;height:44px}