/* Native app layout conventions, with original assets and portfolio content. */
.utility-app .utility-main{background:#fff;color:#202023}
body:not(.phone-ui):not(.tablet-ui) #preview-window:has(.calculator-app){width:340px;height:520px;left:calc(50% - 170px)}
body:not(.phone-ui):not(.tablet-ui) #preview-window:has(.clock-app){width:min(900px,calc(100vw - 70px));left:max(30px,calc(50% - 450px))}
.calculator-app .utility-main{background:#242424!important;padding:15px!important;display:flex;align-items:flex-end;justify-content:center}
.calculator-app .port-toolbar{background:#292929!important;border:0!important;color:#eee!important}.calculator-app .native-window-heading strong{color:#eee}
.calculator{width:100%;max-width:370px}.calc-display{font-weight:300;font-size:58px;padding:10px 8px 18px}.calc-keys{gap:1px;background:#242424}.calc-keys button{border-radius:0;height:63px;background:#555555;font-size:28px}.calc-keys .calc-secondary{background:#3b3b3b}.calc-keys .calc-operation{background:#ff9f0a}.calc-keys button:first-child{border-top-left-radius:7px}.calc-keys button:nth-child(4){border-top-right-radius:7px}.calc-keys button:nth-child(17){border-bottom-left-radius:7px}.calc-keys button:last-child{border-bottom-right-radius:7px}.calc-expression{color:#aaa}
.clock-app{background:#181818!important;color:#fff!important}.clock-app .utility-main{background:#181818;color:#f8f8f8;position:relative}.clock-app .port-toolbar{background:#272727!important;border-color:#333!important}.clock-app .native-window-heading strong{color:#eee}.clock-heading{display:none}.clock-tabs{gap:0;margin:0 auto 35px;width:max-content;border-radius:7px;border:1px solid #555;overflow:hidden}.clock-tabs button{border-radius:0;padding:7px 16px;min-height:32px;background:#363636;color:#ccc;font-size:12px}.clock-tabs button+button{border-left:1px solid #555}.clock-tabs button span{display:none}.clock-tabs button[aria-current=page]{background:#666;color:#fff}.world-clocks{gap:25px}.world-clocks article{border-radius:0;background:transparent;border:0;border-bottom:1px solid #3a3a3a;padding:28px 5px;display:flex;justify-content:space-between;align-items:center;gap:12px}.world-clocks h2{font-size:25px;font-weight:400;margin:6px 0}.world-clocks time{font-size:45px;font-weight:200;white-space:nowrap}.world-clocks small{font-size:12px;margin:0;color:#999}.clock-focus{max-width:680px;margin:auto}.clock-focus output{font-weight:200;font-size:90px;margin:35px 0 60px}.clock-round-actions{display:flex;justify-content:space-between;gap:15px;align-items:center}.clock-round-actions button{border-radius:50%;width:78px;height:78px;background:#333;color:#ddd;padding:0;border:3px solid #181818;outline:2px solid #333}.clock-round-actions .clock-start{background:#153b20;color:#57d376;outline-color:#153b20}.clock-round-actions .clock-stop{background:#491a1a;color:#ff5550;outline-color:#491a1a}.clock-round-actions button:disabled{opacity:.4;cursor:default}.stopwatch-laps{margin-top:35px}.stopwatch-laps>div{display:flex;justify-content:space-between;border-top:1px solid #393939;padding:13px 0;font-variant-numeric:tabular-nums}.timer-duration{color:#aaa}.clock-app .utility-main input{background:#303030;color:white;border-color:#555}.alarm-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-bottom:20px}.alarm-form label{display:flex;gap:12px;align-items:center}.alarm-form button{color:#ff9f0a;padding:10px}.alarm-list article{display:flex;gap:20px;align-items:center;border-top:1px solid #333;padding:15px 0}.alarm-list article>div{flex:1}.alarm-list time{font-weight:200;font-size:48px}.alarm-list p{margin:4px 0;color:#aaa}.alarm-list button{font-size:24px;color:#888}.alarm-switch input{position:absolute;opacity:0}.alarm-switch span{display:block;width:50px;height:30px;border-radius:20px;background:#555;position:relative}.alarm-switch span:after{content:'';position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s}.alarm-switch input:checked+span{background:#30d158}.alarm-switch input:checked+span:after{transform:translateX(20px)}.alarm-switch input:focus-visible+span{outline:2px solid #fff}.clock-empty{text-align:center;color:#888;font-size:30px;padding:60px 0}.alarm-caption{font-size:12px;color:#888} [data-alarm-notice]:not(:empty){padding:16px;background:#493c20;color:#ffc46c;border-radius:12px}
.reminders-layout{display:flex;flex:1;min-height:0;background:#fff}.reminders-sidebar{width:230px;flex-shrink:0;background:#f0eeee;padding:26px 12px;overflow:auto}.reminders-sidebar h2{font-size:12px;color:#888;margin:0 10px 14px}.reminders-sidebar button{display:flex;align-items:center;gap:10px;padding:10px;width:100%;border-radius:7px;text-align:left;color:#333}.reminders-sidebar button[aria-current=page]{background:#dcdadc}.reminders-sidebar i{width:26px;height:26px;display:grid;place-items:center;background:#a466cc;color:white;border-radius:50%;font-style:normal;font-size:18px}.reminders-sidebar strong{font-weight:500;flex:1}.reminders-sidebar span{color:#888}.tasks-app .tasks-main{flex:1;overflow:auto;padding:35px 35px}.tasks-heading{display:flex;justify-content:space-between;align-items:center}.tasks-heading h1{font-size:34px;color:#a05bc4;margin:0}.tasks-heading>strong{font-size:34px;color:#a05bc4}.tasks-subtitle{font-size:12px;color:#888;margin:12px 0 25px}.tasks-app .task-row{background:transparent;border:0;border-bottom:1px solid #eee;border-radius:0;margin:0;min-height:60px;gap:14px;padding:14px 0;font-size:14px}.task-row input{appearance:none;width:21px;height:21px;border:1.5px solid #c5c5c8;border-radius:50%;flex-shrink:0;margin:0;cursor:pointer}.task-row input:checked{border:4px solid white;background:#a05bc4;box-shadow:0 0 0 1.5px #a05bc4}.task-row input:focus-visible{outline:2px solid #a05bc4;outline-offset:4px}.reminders-empty{color:#aaa;text-align:center;margin-top:70px}
.calendar-app .utility-main{padding:0;display:flex}.calendar-sidebar{width:190px;flex-shrink:0;background:#f1f1f1;padding:25px 18px;border-right:1px solid #ddd}.calendar-sidebar h2{font-size:15px;margin:0 0 28px}.calendar-sidebar p{font-size:11px;color:#888}.calendar-sidebar label{display:flex;align-items:center;gap:8px;font-size:13px}.calendar-sidebar input{accent-color:#ff3b30}.calendar-sidebar small{display:block;font-size:10px;color:#888;margin-top:25px;line-height:1.5}.calendar-sidebar-date{margin-top:50px;text-align:center}.calendar-sidebar-date strong{display:block;font-size:65px;font-weight:200;color:#ff3b30}.calendar-sidebar-date span{font-size:12px;color:#777}.calendar-workspace{min-width:0;flex:1;padding:25px;overflow:auto}.calendar-heading{gap:8px;margin-bottom:15px}.calendar-heading h1{margin-right:auto;font-size:27px;font-weight:500}.calendar-heading button{border-radius:5px;background:white;border:1px solid #ddd;width:30px;height:28px;min-height:28px;font-size:18px;color:#444}.calendar-heading [data-calendar-today]{width:auto;font-size:12px;padding:0 10px}.schedule-grid{gap:0}.schedule-grid>strong{text-align:right;font-weight:400;color:#999;padding:12px 8px}.schedule-day{border:0;border-top:1px solid #ddd;border-right:1px solid #eee;border-radius:0;min-height:80px;text-align:right;padding:9px}.schedule-day b{font-weight:400}.schedule-day.today{border-color:#ddd}.schedule-day.today b{background:#ff3b30;border-radius:50%;padding:4px 5px}.schedule-day small{text-align:left;background:#fee5e4;color:#aa322c;padding:3px 4px;border-radius:3px}.calendar-app [data-calendar-form]{padding-top:15px;border-top:1px solid #ddd}.calendar-app [data-calendar-form] h2{color:#555;font-weight:500;font-size:13px}.calendar-app [data-calendar-form] button{color:#ff3b30;background:#f7f7f7;font-size:12px}.calendar-app .schedule-events{font-size:12px}
.writer-app .utility-main{background:#e6e6e6;padding:0;display:flex;flex-direction:column}.writer-tools{background:#f7f7f7;border-bottom:1px solid #c6c6c6;gap:15px;min-height:48px;padding:8px 16px;margin:0;color:#555;flex-wrap:wrap}.writer-tools label{display:flex;align-items:center;gap:6px;font-size:11px}.writer-tools select{border:1px solid #ccc;border-radius:5px;padding:4px;background:#fff;color:#444}.writer-tools>span{margin-left:auto;font-size:10px}.writer-tools button{background:white;border:1px solid #ccc;border-radius:5px;font-size:11px;padding:5px 9px;min-height:26px}.writer-editor{margin:25px auto;min-height:500px;width:calc(100% - 80px);max-width:700px;flex:1;border-radius:0!important;border:0!important;box-shadow:0 1px 8px #0002;padding:50px!important;font:16px/1.7 Georgia,serif!important}
.books-app .utility-main{background:#fff}.books-app .utility-main>h1{font-size:32px}.books-app .utility-main>p{color:#999;font-size:13px}.reading-library{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.reading-library button{border:0;background:transparent;border-radius:0;padding:0;display:flex;flex-direction:column;align-items:stretch;text-align:left}.reading-library button>span{font-size:9px;color:white;background:#294357;padding:25px 25px 10px;letter-spacing:2px;border-left:5px solid #183140;box-shadow:3px 0 8px #0002}.reading-library h2{margin:0;background:#294357;color:#f4efdf;min-height:210px;display:flex;align-items:center;padding:15px 25px 35px;font:23px/1.3 Georgia,serif;border-left:5px solid #183140;box-shadow:3px 5px 8px #0002}.reading-library button:nth-child(2)>span,.reading-library button:nth-child(2)>h2{background:#954135;border-left-color:#703127}.reading-library button:nth-child(3)>span,.reading-library button:nth-child(3)>h2{background:#e8b95e;color:#403424;border-left-color:#c89841}.reading-library p{font-size:11px;line-height:1.5;margin:14px 0 7px}.reading-library small{color:#888;font-size:10px}
.canvas-app .utility-main{position:relative;background-color:#fafafa;background-image:radial-gradient(#c9c9c9 1px,transparent 1px);background-size:18px 18px;display:flex;flex-direction:column}.canvas-tools{order:2;margin:15px auto 0;padding:8px 15px;background:#fff;border:1px solid #ddd;border-radius:14px;box-shadow:0 5px 20px #0001}.canvas-tools button{border-radius:7px;padding:8px 10px;font-size:12px;background:#f3f3f3;color:#444;min-height:32px}#workspace-canvas{background:transparent;border:0;border-radius:0;max-height:calc(100% - 100px);flex:1;min-height:200px}.canvas-app p{order:3;text-align:center;margin-bottom:0}.terminal-app .utility-main{background:#171717!important;color:#eee!important}.terminal-output pre,.terminal-command,.terminal-app form label{color:#eee}.terminal-app .port-toolbar{background:#e8e8e8!important}.terminal-app .utility-main{font-size:13px;line-height:1.5}
body.tablet-ui .calc-keys{gap:10px;background:transparent}body.tablet-ui .calc-keys button{border-radius:50%;height:78px;font-size:31px}body.tablet-ui .calculator-app .utility-main{align-items:center}body.tablet-ui .calc-display{font-size:75px}body.tablet-ui .clock-focus{max-width:650px}body.tablet-ui .clock-heading{display:block;font-size:34px;margin-bottom:30px}body.tablet-ui .clock-tabs{margin-bottom:30px}
body.phone-ui .calculator-app .utility-main{padding:20px 17px 40px!important;align-items:flex-end}body.phone-ui .calc-keys{gap:12px;background:transparent}body.phone-ui .calc-keys button{border-radius:50%;height:70px;font-size:31px;background:#333}body.phone-ui .calc-keys .calc-operation{background:#ff9f0a}body.phone-ui .calc-keys .calc-secondary{background:#a5a5a5;color:#111}body.phone-ui .calc-display{font-size:72px;padding:15px 6px 28px}body.phone-ui .clock-app .utility-main{padding:15px 20px 100px}body.phone-ui .clock-heading{display:block;font-size:33px;margin:15px 0 25px;font-weight:700}body.phone-ui .clock-app .port-toolbar{background:#181818!important;border:0!important}body.phone-ui .clock-app .native-window-heading{visibility:hidden}body.phone-ui .clock-tabs{position:absolute;bottom:0;left:0;right:0;width:100%;margin:0;z-index:4;background:#222e;backdrop-filter:blur(20px);border:0;border-radius:0;padding:10px 0 25px;justify-content:space-around}body.phone-ui .clock-tabs button{background:transparent!important;border:0;min-width:0;font-size:10px;padding:0 5px;color:#888}body.phone-ui .clock-tabs button[aria-current=page]{color:#ff9f0a}body.phone-ui .clock-tabs button span{display:block;font-size:26px;line-height:1.3;margin-bottom:5px}body.phone-ui .world-clocks{gap:0}body.phone-ui .world-clocks article{padding:18px 0}body.phone-ui .world-clocks h2{font-size:23px}body.phone-ui .world-clocks time{font-size:44px}body.phone-ui .clock-focus{padding:20px 0}body.phone-ui .clock-focus output{font-size:67px;margin:45px 0 70px}body.phone-ui .clock-round-actions button{width:68px;height:68px;font-size:13px}body.phone-ui .alarm-form{gap:5px}body.phone-ui .alarm-form input[name=label]{width:110px}body.phone-ui .alarm-list time{font-size:45px}
body.phone-ui .reminders-layout{flex-direction:column}body.phone-ui .reminders-sidebar{width:auto;padding:10px 20px;display:flex;gap:10px;background:#fff}body.phone-ui .reminders-sidebar h2{display:none}body.phone-ui .reminders-sidebar button{width:auto;flex:1;background:#f2f2f7;font-size:12px}body.phone-ui .reminders-sidebar button[aria-current=page]{background:#ede1f5}body.phone-ui .tasks-app .tasks-main{padding:20px}body.phone-ui .tasks-heading h1,body.phone-ui .tasks-heading>strong{font-size:32px}body.phone-ui .tasks-app .task-row{font-size:16px;line-height:1.5}
body.phone-ui .calendar-app .utility-main{padding:0 12px 50px!important;display:block}body.phone-ui .calendar-sidebar{display:none}body.phone-ui .calendar-workspace{padding:15px 0}body.phone-ui .calendar-heading h1{font-size:25px;color:#ff3b30}body.phone-ui .calendar-heading button{color:#ff3b30;border:0}body.phone-ui .schedule-grid>strong{font-size:10px;color:#444;text-align:center}body.phone-ui .schedule-day{min-height:55px;border-right:0;text-align:center;padding:10px 2px}body.phone-ui .schedule-day b{font-size:19px}body.phone-ui .schedule-day small{font-size:8px;padding:2px}body.phone-ui .schedule-day.today b{padding:4px 6px}body.phone-ui .calendar-app [data-calendar-form] input{font-size:13px;min-width:0}body.phone-ui .calendar-app [data-calendar-form] input[name=title]{width:100%}
body.phone-ui .writer-tools{flex-direction:row;align-items:center;gap:8px;padding:10px}body.phone-ui .writer-tools>span{display:none}body.phone-ui .writer-editor{width:100%;margin:0;min-height:400px;padding:25px!important;box-shadow:none}body.phone-ui .writer-app .utility-main{padding:0 0 40px!important}body.phone-ui .reading-library{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 20px}body.phone-ui .reading-library h2{min-height:170px;font-size:18px;padding:10px 12px 20px}body.phone-ui .reading-library button>span{padding:18px 12px 0;font-size:7px}body.phone-ui .reading-library p{font-size:10px}body.phone-ui .canvas-app .utility-main{padding:10px 8px 50px}body.phone-ui .canvas-tools{gap:10px;padding:10px;justify-content:center}body.phone-ui .canvas-tools label{font-size:10px}body.phone-ui .canvas-tools button{font-size:10px}body.phone-ui .canvas-tools input[type=range]{width:65px}
@media(prefers-reduced-motion:reduce){.alarm-switch span:after{transition:none}}
.store-app{display:flex;flex-direction:column}.store-content{overflow:auto;flex:1;padding:30px 40px;background:white}.store-content header>span{font-size:10px;color:#999;font-weight:600;letter-spacing:1px}.store-content h1{font-size:34px;margin:5px 0 24px}.store-feature{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;border-radius:12px;background:linear-gradient(120deg,#fff3c2,#f5df93);color:#49422d;padding:35px;gap:25px}.store-feature h2{font-size:30px;line-height:1.2;margin:10px 0}.store-feature small{font-size:10px;font-weight:600;letter-spacing:1px}.store-feature p{font-size:13px;margin:10px 0 22px}.store-feature span{font-size:12px;font-weight:600}.store-feature img{width:115px;height:115px;transform:rotate(-8deg);filter:drop-shadow(0 15px 15px #917f4930)}.store-section-title{font-size:23px;margin:28px 0 0}.store-app .utility-app-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}.store-app .utility-app-grid article{display:flex;align-items:center;gap:12px;border-bottom:1px solid #eee;padding:18px 0;min-width:0}.store-app .utility-app-grid img{width:48px;height:48px;flex-shrink:0}.store-app .utility-app-grid article>div{flex:1;min-width:0}.store-app .utility-app-grid strong{display:block;font-size:14px;font-weight:500}.store-app .utility-app-grid small{display:block;color:#888;font-size:11px;margin-top:4px;line-height:1.4}.store-app .utility-app-grid button{color:#007aff;background:#f1f1f5;font-size:11px;font-weight:650;border-radius:20px;padding:7px 14px;flex-shrink:0}.store-app .utility-app-grid button:hover{background:#e5e5ec}
body.phone-ui .store-content{padding:22px 20px 60px}body.phone-ui .store-feature{padding:25px 18px;gap:10px}body.phone-ui .store-feature img{width:65px;height:65px}body.phone-ui .store-feature h2{font-size:23px}body.phone-ui .store-feature p{font-size:11px}body.phone-ui .store-app .utility-app-grid{grid-template-columns:1fr}body.phone-ui .store-app .utility-app-grid button{padding:7px 15px;font-size:11px}body.phone-ui .store-content h1{font-size:34px}body.phone-ui .store-section-title{font-size:24px}
.alarm-switch{position:relative;display:block;width:50px;height:30px;flex-shrink:0}.alarm-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:1;cursor:pointer}.alarm-switch span{pointer-events:none}
.clock-face{width:165px;height:165px;position:relative;border-radius:50%;background:#101010;color:#fff;border:2px solid #454545;margin:18px auto}.clock-face.clock-day{background:#f6f6f6;color:#222;border-color:#f6f6f6}.clock-face>span{position:absolute;inset:8px;transform:rotate(var(--angle));text-align:center}.clock-face>span b{display:block;font-size:15px;font-weight:500;transform:rotate(calc(-1 * var(--angle)))}.clock-hand{position:absolute;left:calc(50% - 2px);bottom:50%;width:4px;height:39%;background:currentColor;transform-origin:50% 100%;border-radius:4px}.clock-hand.hour-hand{height:27%;width:5px;left:calc(50% - 2.5px)}.clock-hand.second-hand{width:1px;left:50%;height:42%;background:#ff9f0a}.clock-face>em{position:absolute;left:calc(50% - 4px);top:calc(50% - 4px);width:8px;height:8px;background:#ff9f0a;border-radius:50%}
body:not(.phone-ui) .world-clocks{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}body:not(.phone-ui) .world-clocks article{display:block;text-align:center;border:0;background:#222;border-radius:12px;padding:20px 8px}body:not(.phone-ui) .world-clocks h2{font-size:18px;min-height:42px;margin:8px 0}body:not(.phone-ui) .world-clocks time{font-size:24px}body.phone-ui .clock-face{display:none}body.tablet-ui .world-clocks{grid-template-columns:repeat(2,minmax(0,1fr))}body.tablet-ui .clock-face{width:185px;height:185px}
@media(max-width:900px){body:not(.phone-ui):not(.tablet-ui) .world-clocks{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.phone-ui:has(#preview-content .clock-app).phone-app-open .phone-status,body.tablet-ui:has(#preview-content .clock-app).phone-app-open .tablet-status,body.phone-ui:has(#preview-content .terminal-app).phone-app-open .phone-status,body.tablet-ui:has(#preview-content .terminal-app).phone-app-open .tablet-status{color:#fff!important}
body.phone-ui:has(#preview-content .clock-app).phone-app-open .phone-status-icons *,body.tablet-ui:has(#preview-content .clock-app).phone-app-open .tablet-status-right *,body.phone-ui:has(#preview-content .terminal-app).phone-app-open .phone-status-icons *,body.tablet-ui:has(#preview-content .terminal-app).phone-app-open .tablet-status-right *{color:#fff!important;border-color:#fff!important}
body.phone-ui:has(#preview-content .clock-app) .phone-home-button::after,body.tablet-ui:has(#preview-content .clock-app) .tablet-home-button::after,body.phone-ui:has(#preview-content .terminal-app) .phone-home-button::after,body.tablet-ui:has(#preview-content .terminal-app) .tablet-home-button::after{background:#fff!important;box-shadow:none}
.clock-tabs button span svg{width:25px;height:25px;display:block;margin:auto}