*{box-sizing:border-box}body{margin:0;font-family:Sarabun,sans-serif;color:#082d5d;background:#f8fbff}button,input,select{font:inherit}.topbar{height:64px;background:#003b70;color:#fff}.topbar-inner{max-width:1320px;margin:auto;height:100%;display:flex;align-items:center;gap:25px;padding:0 28px}.brand{display:flex;align-items:center;color:#fff;text-decoration:none;min-width:285px}.book-logo{font-size:38px;margin-right:9px}.brand-name{font:700 24px Prompt}.brand-name b{color:#ffc31a}.brand-sub{font-size:11px}.nav{display:flex;gap:24px;align-items:center;flex:1;justify-content:center}.nav a{font-size:12px;color:#fff;text-decoration:none;white-space:nowrap}.nav .active{color:#ffc51b;border-bottom:3px solid #ffc51b;padding:22px 0}.socials{display:flex;gap:10px;align-items:center;font-size:25px}.socials a,.foot-social>a:not(.contact){width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#1687f7;color:#fff;text-decoration:none;font-weight:700}.socials .yt,.foot-social .yt{background:#ff1748!important}.hero{height:292px;background:linear-gradient(90deg,#f4fbff 0,#fff 57%,#edf7f3 100%);overflow:hidden}.crumb,.hero-inner,.page-wrap{max-width:1320px;margin:auto}.crumb{padding:14px 28px 6px;font-size:13px;display:flex;gap:10px}.crumb a{color:#3988df;text-decoration:none}.hero-inner{height:245px;display:flex;padding:0 28px}.hero-left{width:62%;padding-top:22px}.hero-title-row{display:flex;gap:24px;align-items:center}.hero-icon{width:112px;height:112px;border-radius:22px;background:linear-gradient(145deg,#ad35f3,#6a20f0);display:grid;place-items:center;color:#fff;font-size:62px;box-shadow:0 14px 28px #6d28d933}.hero h1{font:800 45px Prompt;margin:0}.hero h2{font:600 20px Prompt;margin:2px 0}.hero p{margin:2px 0;color:#31567e}.benefits{display:flex;gap:45px;margin:22px 15px}.benefits div{display:grid;grid-template-columns:38px auto;grid-template-rows:auto auto}.benefits i{grid-row:1/3;font-style:normal;font-size:29px}.benefits strong{font-size:14px}.benefits small{color:#52708e}.hero-right{width:38%;position:relative}.hero-right img{height:270px;position:absolute;bottom:-5px;left:0}.quote{position:absolute;right:15px;top:38px;font:600 20px Prompt;text-align:center;transform:rotate(-2deg)}.quote span{display:block;width:150px;border-bottom:4px solid #ffb800;transform:rotate(-7deg);margin:6px auto}.page-wrap{padding:18px 28px 28px}.tabs{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:20px}.tab{height:62px;border:1px solid #cbdff4;background:#fff;color:#244c7c;font:600 16px Prompt}.tab:first-child{border-radius:10px 0 0 10px}.tab:last-child{border-radius:0 10px 10px 0}.tab.active{background:linear-gradient(135deg,#23a6ff,#0878ed);color:#fff}.tab-panel{display:none}.tab-panel.active{display:block}.main-grid{display:grid;grid-template-columns:2fr 1.05fr;gap:16px}.card{background:#fff;border:1px solid #cfe2f5;border-radius:14px;padding:22px;box-shadow:0 5px 18px #0a559708}.card-title{display:flex;align-items:center;gap:12px;margin-bottom:18px}.card-title h3{font:700 23px Prompt;margin:0}.card-title p{margin:0;color:#607c9c}.card-title .outline{margin-left:auto}.round,.bulb,.check{width:44px;height:44px;border-radius:50%;background:#ddecff;display:grid;place-items:center;font-size:24px}.outline{border:1px solid #c7d9ed;background:#fff;border-radius:8px;padding:9px 14px;color:#2b5586}.modes{display:grid;grid-template-columns:1fr 1fr;gap:15px}.mode{height:76px;border:1px solid #cbdff4;border-radius:10px;background:#fff;color:#496787;display:flex;align-items:center;justify-content:center;gap:12px;font-size:26px}.mode b,.mode small{display:block;font-size:15px}.mode.active{background:linear-gradient(135deg,#31a9ff,#0879ef);color:#fff}.activity-label{display:grid;grid-template-columns:165px 1fr;align-items:center;font-weight:700;margin:22px 0}.activity-label input{height:48px;border:1px solid #cbdff4;border-radius:8px;padding:0 14px}.time-inputs{display:flex;gap:15px;margin-left:165px}.time-inputs label{text-align:center}.time-inputs input{width:110px;height:54px;text-align:center;border:1px solid #cbdff4;border-radius:8px;font-size:22px;font-weight:700;color:#082d5d}.time-inputs small{display:block;margin-top:5px}.timer-card h4{margin:25px 0 10px}.presets{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.presets button{height:42px;border:1px solid #cbdff4;border-radius:8px;background:#f6faff;color:#0b3970}.presets .active{background:#148bf6;color:#fff}.dial{display:flex;justify-content:center;padding:25px}.ring{width:270px;height:270px;border-radius:50%;background:conic-gradient(#168af4 0 34%,#e5edf6 34%);padding:18px}.ring>div{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.ring span{font-size:25px}.ring b{font:800 58px Prompt}.ring small{font-size:16px}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.controls button{height:62px;border:0;border-radius:8px;color:#fff;font:700 20px Prompt}.start{background:#08bd65}.pause{background:#ffb20b}.reset{background:#ff1e52}.secondary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:15px}.secondary button{height:44px;background:#fff;border:1px solid #cbdff4;border-radius:8px;color:#123e71}.settings label{display:block;font-weight:700;margin:16px 0 8px}.sound-select{display:flex;gap:10px}.sound-select select{flex:1;height:45px;border:1px solid #cbdff4;border-radius:8px;padding:0 12px}.sound-select button{width:48px;border:1px solid #cbdff4;background:#fff;border-radius:8px}.settings input[type=range]{width:100%}.toggles label{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid #edf2f8}.toggles input{accent-color:#08bd65;width:21px;height:21px}.history{margin-top:16px}.history-row{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #edf2f8}.history-row>span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#389cf7;color:#fff;font-weight:700}.history-row small{display:block;color:#69829c}.bottom-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:16px;margin-top:16px}.steps{display:grid;grid-template-columns:1fr 1fr;gap:22px}.steps>div{display:flex;gap:12px}.steps b{width:40px;height:40px;border-radius:50%;background:#4ca7fa;color:#fff;display:grid;place-items:center;font-size:20px}.steps strong,.steps small{display:block}.tips{background:linear-gradient(135deg,#fff,#effff7)}.tips ul{list-style:none;padding:0;line-height:2}.tips li:before{content:'✓';color:#08b865;font-weight:800;margin-right:10px}.tips blockquote{text-align:right;color:#0878ed;font:600 17px Prompt}.info{min-height:350px}.footer{background:#003b70;color:#fff}.footer-main,.footer-bottom{max-width:1320px;margin:auto;padding:24px 28px;display:flex;align-items:center;justify-content:space-between}.foot-brand{display:flex;align-items:center}.foot-quote{text-align:center;font:500 18px Prompt}.foot-social{display:flex;gap:12px;align-items:center}.contact{background:#ffc529;color:#082d5d;text-decoration:none;border-radius:25px;padding:11px 32px;font-weight:700}.footer-bottom{border-top:1px solid #35678e;padding-top:15px;padding-bottom:15px;font-size:12px}@media(max-width:900px){.nav{display:none}.hero-right{display:none}.hero-left{width:100%}.main-grid,.bottom-grid{grid-template-columns:1fr}.page-wrap{padding:12px}.tabs{grid-template-columns:1fr 1fr}.presets{grid-template-columns:repeat(3,1fr)}.hero h1{font-size:32px}.benefits{gap:10px}.time-inputs{margin-left:0}.activity-label{grid-template-columns:1fr}.footer-main{flex-direction:column;gap:18px}}
@media print{.no-print,.settings,.secondary,.bottom-grid{display:none!important}.main-grid{display:block}.card{border:0;box-shadow:none}}