1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > KISS</ title >
7+ < link rel ="stylesheet " href ="https://unpkg.com/open-props@1.7.20/open-props.min.css " />
8+ < link rel ="icon " type ="image/svg+xml " href ="/favicon.svg " />
9+ < style > : root , [data-theme = "light" ]{--kiss-bg-base : var (--gray-0 );--kiss-bg-surface : var (--gray-1 );--kiss-bg-elevated : var (--gray-2 );--kiss-bg-hover : var (--gray-2 );--kiss-bg-card : var (--gray-0 );--kiss-border : var (--gray-3 );--kiss-border-hover : var (--gray-4 );--kiss-text-primary : var (--gray-12 );--kiss-text-secondary : var (--gray-7 );--kiss-text-tertiary : var (--gray-6 );--kiss-text-muted : var (--gray-5 );--kiss-accent : var (--gray-12 );--kiss-accent-dim : var (--gray-8 );--kiss-accent-subtle : var (--gray-2 );--kiss-code-bg : var (--gray-2 );--kiss-code-border : var (--gray-3 );--kiss-error : var (--red-7 );--kiss-scrollbar-track : transparent;--kiss-scrollbar-thumb : var (--gray-4 );color-scheme : light}[data-theme = "dark" ]{--kiss-bg-base : var (--gray-12 );--kiss-bg-surface : var (--gray-11 );--kiss-bg-elevated : var (--gray-10 );--kiss-bg-hover : var (--gray-11 );--kiss-bg-card : var (--gray-11 );--kiss-border : var (--gray-9 );--kiss-border-hover : var (--gray-8 );--kiss-text-primary : var (--gray-0 );--kiss-text-secondary : var (--gray-5 );--kiss-text-tertiary : var (--gray-7 );--kiss-text-muted : var (--gray-8 );--kiss-accent : var (--gray-0 );--kiss-accent-dim : var (--gray-4 );--kiss-accent-subtle : var (--gray-11 );--kiss-code-bg : var (--gray-10 );--kiss-code-border : var (--gray-9 );--kiss-error : var (--red-4 );--kiss-scrollbar-track : transparent;--kiss-scrollbar-thumb : var (--gray-9 );color-scheme : dark}body {margin : 0 ;background : var (--kiss-bg-base );color : var (--kiss-text-primary );font-family : -apple-system, BlinkMacSystemFont, "Segoe UI" , Roboto, "Helvetica Neue" , Arial, sans-serif;-webkit-font-smoothing : antialiased;-moz-osx-font-smoothing : grayscale}</ style >
10+ < script src ="/theme-init.js "> </ script >
11+ < script src ="/mobile-sidebar.js "> </ script >
12+ < script src ="/has-fallback.js "> </ script >
13+ < link rel ="manifest " href ="/manifest.json "> </ head >
14+ < body >
15+ < page-not-found >
16+ < template shadowrootmode ="open ">
17+ < style >
18+ : host {
19+ dis play: block;
20+ }
21+
22+ .container {
23+ max-width : 720px ;
24+ margin : 0 auto;
25+ padding : 2rem 1.5rem 4rem ;
26+ }
27+
28+ h1 {
29+ font-size : 2rem ;
30+ font-weight : 500 ;
31+ letter-spacing : -0.02em ;
32+ margin : 0 0 0.5rem ;
33+ color : var (--kiss-text-primary );
34+ line-height : 1.2 ;
35+ }
36+
37+ .subtitle {
38+ color : var (--kiss-text-tertiary );
39+ margin-bottom : 3rem ;
40+ font-size : 0.875rem ;
41+ line-height : 1.7 ;
42+ }
43+
44+ h2 {
45+ font-size : 1rem ;
46+ font-weight : 500 ;
47+ margin : 2rem 0 0.75rem ;
48+ color : var (--kiss-text-primary );
49+ }
50+
51+ h3 {
52+ font-size : 0.875rem ;
53+ font-weight : 500 ;
54+ margin : 1.5rem 0 0.5rem ;
55+ color : var (--kiss-text-primary );
56+ }
57+
58+ p {
59+ line-height : 1.7 ;
60+ margin : 0.5rem 0 ;
61+ color : var (--kiss-text-secondary );
62+ font-size : 0.875rem ;
63+ }
64+
65+ strong {
66+ color : var (--kiss-text-primary );
67+ font-weight : 500 ;
68+ }
69+ em {
70+ font-style : italic;
71+ }
72+
73+ a {
74+ color : var (--kiss-text-primary );
75+ text-decoration : underline;
76+ text-underline-offset : 3px ;
77+ text-decoration-color : var (--kiss-border-hover );
78+ text-decoration-thickness : 0.5px ;
79+ transition : text-decoration-color 0.15s ;
80+ }
81+ a : hover {
82+ text-decoration-color : var (--kiss-text-primary );
83+ }
84+
85+ /* Code */
86+ pre {
87+ background : var (--kiss-code-bg );
88+ color : var (--kiss-text-secondary );
89+ padding : 1rem 1.25rem ;
90+ border-radius : 3px ;
91+ overflow-x : auto;
92+ font-size : 0.8125rem ;
93+ line-height : 1.6 ;
94+ margin : 0.75rem 0 ;
95+ border : 0.5px solid var (--kiss-code-border );
96+ }
97+
98+ code {
99+ font-family : "SF Mono" , "Fira Code" , "Consolas" , monospace;
100+ }
101+
102+ p code , li code {
103+ background : var (--kiss-code-bg );
104+ padding : 0.125rem 0.375rem ;
105+ border-radius : 3px ;
106+ font-size : 0.75rem ;
107+ color : var (--kiss-text-secondary );
108+ border : 0.5px solid var (--kiss-code-border );
109+ }
110+
111+ .inline-code {
112+ background : var (--kiss-code-bg );
113+ padding : 0.125rem 0.375rem ;
114+ border-radius : 3px ;
115+ font-size : 0.875em ;
116+ }
117+
118+ /* Tables */
119+ table {
120+ width : 100% ;
121+ border-collapse : collapse;
122+ margin : 0.75rem 0 1.5rem ;
123+ font-size : 0.8125rem ;
124+ }
125+ th , td {
126+ border : 0.5px solid var (--kiss-border );
127+ padding : 0.5rem 0.75rem ;
128+ text-align : left;
129+ }
130+ th {
131+ font-weight : 500 ;
132+ color : var (--kiss-text-secondary );
133+ }
134+ td {
135+ color : var (--kiss-text-tertiary );
136+ }
137+
138+ /* Callouts */
139+ .callout {
140+ padding : 1rem 1.25rem ;
141+ margin : 1rem 0 ;
142+ border-left : 2px solid var (--kiss-border-hover );
143+ background : var (--kiss-bg-surface );
144+ border-radius : 0 3px 3px 0 ;
145+ }
146+ .callout .warn {
147+ border-left-color : var (--kiss-text-tertiary );
148+ }
149+
150+ .pillar {
151+ padding : 1.25rem 1.5rem ;
152+ margin : 1rem 0 ;
153+ border-left : 2px solid var (--kiss-border-hover );
154+ background : var (--kiss-bg-surface );
155+ border-radius : 0 3px 3px 0 ;
156+ }
157+ .pillar .num {
158+ font-size : 0.6875rem ;
159+ font-weight : 500 ;
160+ text-transform : uppercase;
161+ letter-spacing : 0.05em ;
162+ color : var (--kiss-text-muted );
163+ margin-bottom : 0.25rem ;
164+ }
165+ .pillar h3 {
166+ margin : 0 0 0.5rem ;
167+ }
168+
169+ .hard-constraint {
170+ display : inline-block;
171+ background : var (--kiss-code-bg );
172+ border : 0.5px solid var (--kiss-border-hover );
173+ padding : 0.25rem 0.625rem ;
174+ border-radius : 3px ;
175+ font-size : 0.75rem ;
176+ margin : 0.125rem 0 ;
177+ }
178+
179+ /* Lists */
180+ ul , ol {
181+ padding-left : 1.25rem ;
182+ color : var (--kiss-text-secondary );
183+ line-height : 1.7 ;
184+ }
185+ li {
186+ margin : 0.25rem 0 ;
187+ }
188+
189+ /* Page nav */
190+ .nav-row {
191+ margin-top : 2.5rem ;
192+ display : flex;
193+ justify-content : space-between;
194+ }
195+ .nav-link {
196+ display : inline-flex;
197+ align-items : center;
198+ padding : 0.5rem 1rem ;
199+ font-size : 0.75rem ;
200+ font-weight : 500 ;
201+ color : var (--kiss-text-secondary );
202+ text-decoration : none;
203+ border : 0.5px solid var (--kiss-border );
204+ border-radius : 3px ;
205+ transition : color 0.15s , border-color 0.15s ;
206+ }
207+ .nav-link : hover {
208+ color : var (--kiss-text-primary );
209+ border-color : var (--kiss-border-hover );
210+ }
211+
212+ @media (max-width : 900px ) {
213+ .container {
214+ padding : 2rem 1.25rem 3rem ;
215+ }
216+ h1 {
217+ font-size : 1.5rem ;
218+ }
219+ .subtitle {
220+ margin-bottom : 2rem ;
221+ }
222+ pre {
223+ padding : 0.875rem 1rem ;
224+ font-size : 0.75rem ;
225+ }
226+ .nav-row {
227+ flex-direction : column;
228+ gap : 0.75rem ;
229+ }
230+ }
231+
232+ @media (max-width : 480px ) {
233+ .container {
234+ padding : 1.5rem 1rem 2.5rem ;
235+ }
236+ h1 {
237+ font-size : 1.25rem ;
238+ }
239+ .subtitle {
240+ font-size : 0.8125rem ;
241+ margin-bottom : 1.5rem ;
242+ }
243+ h2 {
244+ font-size : 0.9375rem ;
245+ }
246+ p {
247+ font-size : 0.8125rem ;
248+ }
249+ pre {
250+ padding : 0.75rem ;
251+ font-size : 0.6875rem ;
252+ }
253+ ul , ol {
254+ padding-left : 1rem ;
255+ }
256+ }
257+
258+
259+ .error-code {
260+ font-size : 5rem ;
261+ font-weight : 800 ;
262+ letter-spacing : -0.06em ;
263+ color : var (--kiss-text-primary );
264+ margin : 2rem 0 0.5rem ;
265+ line-height : 1 ;
266+ }
267+ .error-message {
268+ color : var (--kiss-text-tertiary );
269+ font-size : 0.9375rem ;
270+ margin-bottom : 2rem ;
271+ }
272+ .home-link {
273+ display : inline-block;
274+ padding : 0.5rem 1.25rem ;
275+ /* 0.5px: reduced to match kiss-ui spec */
276+ border : 0.5px solid var (--kiss-border );
277+ border-radius : 4px ;
278+ color : var (--kiss-text-primary );
279+ text-decoration : none;
280+ font-size : 0.8125rem ;
281+ transition : border-color 0.15s ;
282+ }
283+ .home-link : hover {
284+ border-color : var (--kiss-text-primary );
285+ }
286+ </ style >
287+
288+ < kiss-layout >
289+ < div class ="container " style ="text-align:center;padding-top:4rem ">
290+ < div class ="error-code "> 404</ div >
291+ < p class ="error-message ">
292+ This page does not exist — or has moved to a different route.
293+ </ p >
294+ < a href ="/ " class ="home-link "> ← Back to home</ a >
295+ </ div >
296+ </ kiss-layout >
297+
298+ </ template >
299+ </ page-not-found >
300+
301+ < script type ="module " src ="/client/islands/client.js "> </ script >
302+ < script > addEventListener ( "load" , ( ) => { navigator . serviceWorker ?. register ( "/sw.js" ) } ) </ script > </ body >
303+ </ html >
0 commit comments